Returning last executed value to every div generated dynamically

Question

I am working in wordpress where i have event panel where i have upcoming event detail and i am showing that how much time is left for next or upcoming event. I am getting values dynamically from database and i am managing the time left for upcoming event by the date given by user in admin panel. Now the time is coming up properly but the problem is that its showing one time for all upcoming events means repeating one time for all events.

Here is the jquery script:

$(document).ready(function(){
   var calculate=$('.thematchdate').val();
   $('.counter').countdown(calculate, function(event) {
       $(this).html(event.strftime(''
      + '<span>%D <br> <small>days</small></span>  '
      + '<span>%H <br> <small>hr</small> </span>  '
      + '<span>%M <br> <small>min</small> </span>  '
      + '<span>%S <br> <small>sec</small></span> '));
   });
});

I also tried like that !.

var calculate="";
$('.thematchdate').each(function(index) {
   calculate=$(this).val();

   $('.event-ones').each(function(index){
      alert(calculate+''+index);
      $(this).countdown(calculate, function(event) {
        $(this).html(event.strftime(''
          + '<span>%D <br> <small>days</small></span>  '
          + '<span>%H <br> <small>hr</small> </span>  '
          + '<span>%M <br> <small>min</small> </span>  '
          + '<span>%S <br> <small>sec</small></span> '));
      });
   });
});

Here is the Mark up from which i am taking up value and returning time left:

<input type="hidden" class="thematchdate" value="<?=get_post_meta($p, '_start_date', true); ?>">
<div id="event-one" class="counter event-ones"></div>

Here is the full mark up of that panel

 //loop over each post
                    foreach($posts as $p){
                       ?>
                                    <!-- Item  Event  -->
                                    <li>
                                        <div class="content-counter">
                                            <p class="text-center"> 
                                                <i class="fa fa-clock-o"></i> 
                                                Countdown Till Start
                                            </p>
                 <input type="hidden" class="thematchdate" value="<?=get_post_meta($p, '_start_date', true); ?>">
                    <div id="event-one" class="counter event-ones"></div>
                                            <ul class="post-options">
                                                <li><i class="fa fa-calendar"></i>June 12, 2014</li>
                                                <li><i class="fa fa-clock-o"></i>Kick-of, 12:00 PM</li> 
                                            </ul>
                                            <ul class="list-diary">
                                                <!-- Item List Diary --> 
                                                <li>
                                                    <h5><?=get_post_meta($p,'_league_title',true); ?><span><?=get_post_meta($p, '_start_date', true); ?>- 11:00</span></h5>
                                                    <ul class="club-logo">
                                                        <li>
 <img style="width:100px; height:89px;" class="img img-circle img-responsive" src="<?=get_post_meta($p , '_boj_mbe_image1', true); ?>" alt=""> 
<h6><?=get_post_meta($p, '_team_name1', true); ?></h6>
                                                        </li>
                                                        <li><span>Vs</span></li>
                                                        <li>
  <img style="width:100px; height:89px;" class="img img-circle img-responsive" src="<?=get_post_meta($p , '_boj_mbe_image2', true); ?>" alt="">
 <h6><?=get_post_meta($p, '_team_name2', true);?></h6>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <!-- End Item List Diary --> 
                                            </ul>
                                            <a class="btn btn-primary" href="http://localhost/football/events/">
                                                VIEW EVENT PAGE
                                                <i class="fa fa-trophy"></i>
                                            </a>
                                        </div>
                                    </li>
                                    <? } ?> 

Answer 1

Your first attempt wasn't iterating each event to calculate it separately, so all events got the same calculated time.

Your second attempt was iterating each event and calculating it separately, but for each calculated value it was printing it to all events, so the last calculated value was being shown to all events.

So, just change your second attempt to print the calculated time only to its corresponding element, like this:

var calculate="";
$('.thematchdate').each(function(index) {
    calculate=$(this).val();

    $(this).next('.event-ones').countdown(calculate, function(event) {
        $(this).html(event.strftime(''
            + '<span>%D <br> <small>days</small></span>  '
            + '<span>%H <br> <small>hr</small> </span>  '
            + '<span>%M <br> <small>min</small> </span>  '
            + '<span>%S <br> <small>sec</small></span> ')
        );
    });
});

In this example, I've used jQuery's .next to get the following .event-ones sibling element and call the countdown widget to it, since it's iterating through each .thematchdate element, as the markup you demonstrated:

Here is the Mark up from which i am taking up value and returning time left:

<input type="hidden" class="thematchdate" value="<?=get_post_meta($p, '_start_date', true); ?>">
<div id="event-one" class="counter event-ones"></div>