How to put multiple values in innerHTML of tag in javascript?

In me code first I am getting values of input fields. It is working but when i am trying to append days,minutes,seconds values in countdown tag it appen only one time while foreach loop is creating two countdown tags.

I have tried to put value through loop

var chek=  document.getElementsByClassName('countdown')[i].innerHTML = days +':' + hours +':'+minutes+':' + seconds ;

Html code

<div id="mydiv">
@foreach($auction as $auctions)
@php
$time= Carbon::createFromFormat('H:i:s',Carbon::now('Asia/Karachi')->toTimeString())->diff(Carbon::createFromFormat('H:i:s',$auctions->duration))->format('%H:%I:%S');
    list($h, $m, $s) = explode(':', $time);
    $countdown=($h * 3600) + ($m * 60) + $s;
@endphp
<input class="seconds" type="text" value="">
<span class="countdown"></span>
@endforeach
</div>

javascript code

<script>
var i=0;

for(i=0;i<document.getElementById("mydiv").getElementsByClassName("seconds").length;i++)

{
     var current_level= document.getElementById("mydiv").getElementsByClassName("seconds")[i].value;


     console.log(current_level);


     function timer() {

        var days = Math.floor(current_level/86400);
        var remainingDays = current_level - (days * 86400);



        var hours = Math.floor(remainingDays/3600);
        var remainingHours = remainingDays - (hours * 3600);



        var minutes = Math.floor(remainingHours/60);
        var remainingMinutes = remainingHours - (minutes * 60);


        var seconds = remainingMinutes;

      var chek=  document.getElementsByClassName('countdown')[0].innerHTML = days +':' + hours +':'+minutes+':' + seconds ;

 console.log(chek);

        if(days>=1 || hours>=1 || minutes>=1  || seconds>=1){

        current_level--;
        }
     }
    }
     var countdownTimer = setInterval(timer, 1000);

</script>

As code is displaying two input fields it should also display two countdowns.

via Chebli Mohamed