カウントダウンのタイマーが表示されません

Question

<p class="taimer_text">キャンペーン終了まで</p>
    <div id="countdown">
      </div>
      <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
      <script>
      function countdowntimer(){
       var countdown = setInterval(function(){
        var today = new Date();//今の日時
        var targetDay = new Date('2020/04/18 21:00:00');//ターゲットの日時
        var daysBetween = Math.ceil((targetDay - today) / (24*60*60*1000));//経過日時を1日のミリ秒で割る
        var remainDay = (targetDay - today);//残り日時
        if (remainDay >= 0){//もし残りの日時が0より多かったら、
         var h = Math.floor(remainDay / 3600000);//残りの日時を1hで割った時間を取得(1h＝3600000ms)
         var h1 = h % 24;//hを24で割った余り
         var m = Math.floor((remainDay - h * 3600000) / 60000);//分を取得(1分＝60000 ms)
         var s = Math.round((remainDay - h * 3600000 - m * 60000) / 1000);//秒を取得(1秒＝1000ms)
         $("#countdown").text( daysBetween + "日と" + h1 + "時間" + m + "分" +s + "秒!!");//htmlに出力
         if ((h == 0) && (m == 0) && (s == 0)) {//指定の日時が来たら、
           clearTimeout(countdown);//ウントダウンを止める
           $("#countdown").text("お正月です");//htmlに出力
           }
         }else{//指定の日時が過ぎてもテキストを表字させる用
           $("#countdown").text("キャンペーン実施中");
         }
       }, 1000);//処理を1秒後に予約
      }

      countdowntimer();

      </script>

#countdown {
    font-weight: bold;
    text-align: center;
    color: #fff;
    background-color: #940e35;
    margin: 0;
    font-size: 3rem;
  }

  .taimer_text {
    padding-top: 0.5rem;
    font-size: 1.5rem;
    color: #FFE344;
    font-weight: bold;
    text-align: center;
    margin: 0;
    background-color: #940e35;
  }

こちらなのですが、なぜか

<div id="countdown"></div>

が表示されません。

index.htmlファイルだと表示されたのですが
index.tpl のように拡張子がtplになるとなぜか表示されません...

こちらの原因わかる方いますでしょうか？

ちなみに以下のメディアスクリーン内に記述し、実際の幅を７５０pxより小さくしましたが表示がされませんでした

@media screen and (min-width:0px) and (max-width: 750px)

Answer 1

Webサーバー側で、拡張子がtplのファイルを使用できるように設定する必要があるのではないでしょうか。

Answer 2

１つのtplファイルに複数デバイスのソースがあるのが原因らしいです。

pc専用のソース
sp専用のソース

上記をデバイス幅によって表示させるかさせないか

pc_only{
display : none ;
}

などで切り替えているため
１つのtplファイルに同じカウントダウンのソースが記述されているのが原因？
らしいです。

tplファイルをpcとspで分ける形ですと無事カウントダウンが表示されました。

htmlファイルだと上記問題はないようです...