How we use javascript in repeater.

See more:

ASP.NET

Javascript

HTML

Hi everyone.
My scenario is that. I have a repeater and item template has a span I get some date from database and I want to show like countdown to customers.

I try to wrote like this.


JS.

<script type="text/javascript">
        jQuery(document).ready(function() {
         var _second = 1000;
            var _minute = _second * 60;
            var _hour = _minute * 60;
            var _day = _hour * 24;
            var timer;

            $("#carCampaign span").each(function (index, value) {
                //alert(index);
                var data = $(this).attr('data');
               
                if (data == 'timer') {
                 
                    var end = $(this).attr('end');
                    var date = new Date(end);

                    function showRemaining() {
                        var now = new Date();
                        var distance = date - now;
                      
                        if (distance < 0) {

                            clearInterval(timer);
                            document.getElementById('#Label3' + i).innerHTML = 'EXPIRED!';

                            return;
                        }
                        var hours = Math.floor((distance % _day) / _hour);
                        var minutes = Math.floor((distance % _hour) / _minute);
                        var seconds = Math.floor((distance % _minute) / _second);

                        document.getElementById('Label3').innerHTML = hours + 'hrs ';
                        document.getElementById('Label3').innerHTML += minutes + 'mins ';
                        document.getElementById('Label3').innerHTML += seconds + 'secs';
                        $(this).innerHTML = hours;


                    }

                    timer = setInterval(showRemaining, 1000);
                }
            });

        });
    </script>

.HTML

  <div id="carCampaign">
                <asp:Repeater runat="server" ID="rptOpportunities" OnItemDataBound="rptOpportunities_ItemDataBound" OnItemCommand="rptOpportunities_ItemCommand">
                    <ItemTemplate>                        
                                <div class="panel-body">
                                    <a href="#anyword">
                                        <div class="row">
                                            <div class="col-md-4 search-img">
                                                <asp:Image ID="imageCar" itemprop="image" CssClass="img-responsive" runat="server" />
                                                <div class="row weight-700"><span class="fa fa-clock-o" style="padding-removed 15px;"></span> </div>
                                                <div class="row">
                                                    <div class="coming-soon-plugin" style="font-size: 2.2em; padding-removed 15px; margin-removed -35px;">
                                                        <asp:Label ID="Label3" runat="server" ClientIDMode="Static" CssClass="timer" Text='<%#Eval("DueDateTime") %>' data="timer" end='<%#
Eval("DueDateTime") %>'><br />
                                                        </asp:Label>
                                                        <asp:Label ID="Label1" runat="server"></asp:Label>
                                                        <br />
                                                        <asp:Label ID="Label2" runat="server" />
                                                    </div>
                                                </div>
                                            </div>
                    </ItemTemplate>
                </asp:Repeater>
                    </div>

But that time just first span converted to coundown another does not work.
and I assume that every time countdown try to work the first span. Do you have any suggest?