title: how to clear interval of timer based on the row where button was clicked
body: <p>I have basic understanding of javascript and jquery, but so far all i have done is client side validation and occasional ajax call to servlet. I need to display multiple countup timers(dynamically generated). 
  My page will have many timers(each with their own start/pause/resume/stop buttons). I am able to start the timers individually, but unable to pause them individually.</p>
  
  <p>Referred this link from stackoverflow.(<a href="http://jsfiddle.net/6nv3qy88/" rel="nofollow">http://jsfiddle.net/6nv3qy88/</a>)
  I created another setting <code>"pause:null"</code> in the above plugin.</p>
  
  <pre><code>    (function($) {
          $.fn.upCount = function(options, callback) {
              var settings = $.extend({
                  startTime: null,
                  resume: null,
                  pause: false
              }, options);
  
  
              var container = this;
              globalContainer = container.parent().html();
  
  
              var currentDate = function() {
                  // get client's current date
                  var date = new Date();
                  return date;
              };
  
  
  
              if(settings.startTime){
                  resumeTimer(new Date(settings.startTime));
              }
  
              var original_date = currentDate();
  
              var paus = settings.pause;
              if(paus){
                  alert("In settings.pause" + paus);
                  var target_date = new Date('12/31/2014 12:00:00');
                  paus = true;
              }else{
                  var target_date = new Date('12/08/2015 14:55:00'); // Count up to this date
              }
  
              // Given a start time, lets set the timer
              function resumeTimer(startTime){
                  alert('Resume Timer Needs to Start From StartTime  ' +startTime)
              }
  
              // Start the counter
              function countUp() {
  
                  // Set our current date
                  var current_date = currentDate(); 
                  //alert("In countUp paus--" + paus);
                  // difference of dates
                  var difference = current_date - new Date(settings.startTime);
  
                  if (current_date &gt;= target_date) {
                      // stop timer
                      alert("In stop timer --" + target_date);
                      clearInterval(interval);
                      interval = 0;
                      if (callback &amp;&amp; typeof callback === 'function') callback();
                      return;
                  }
  //Code for Counting timer
              };
  
                  interval = setInterval(countUp, 1000);
  
  
  
          };
  
      })(jQuery);
  </code></pre>
  
  <p>I am able to start the timers individually independent of each other based on rowIndex and start button id.</p>
  
  <p>My code for starting timer:</p>
  
  <pre><code>    function startTimer(id, rowIndex){
      var startTimeId = 'id="list:'+rowIndex+':projectStartTime"';
          var y = $('['+startTimeId+']').text();
          //alert("value of y##" + y);
  
          if(y.length &gt; 0){
              //$('#'+id).upCount({startTime: '12/04/2015 07:00:00', resume: true});
              $('#'+id).upCount({startTime: $('['+startTimeId+']').text()});
          }
        }
  </code></pre>
  
  <p>Above code helps me start multiple timers independently. But I am unable to pause the timers individually. If I click on any pause all timers stop. I use <code>clearInterval(interval)</code>
  for pausing the timers. </p>
  
  <p>pause function:</p>
  
  <pre><code>function pause(id, rowIndex){
      alert("In Function" + id);
      var timer = $('#'+id+' span').text();
  
      $('#'+id).upCount({startTime: '12/04/2015 07:00:00',pause: true});
  }
  </code></pre>
  
  <p><strong>Help needed for:</strong></p>
  
  <p>I would like to know how to clear interval only for the row from which the button is clicked i.e. the timer should pause once pause button is clicked.</p>
  
  <p>JSF commandButton code:</p>
  
  <pre><code>&lt;p:commandButton id="startBtn" action="#{timeBB.addTask}" value="Start"  style="align:center;" styleClass="button" onstart="startTimer(#{impl.timerId},#{rowIndex});"&gt;
         &lt;f:param name="currentRow" value="#{impl.timerId}"/&gt;
  &lt;/p:commandButton&gt;
  
  &lt;p:commandButton id="pauseBtn" value="Pause" action="#{timeBB.pause}" style="align:center;" styleClass="buttonStyle" onstart="pause(#{impl.timerId},#{rowIndex});"&gt;
      &lt;f:param name="currentProjectRowIndex" value="#{impl.timerId}" /&gt;
  &lt;/p:commandButton&gt;
  </code></pre>
  
  <p>Can anyone point out what I am doing wrong here?</p>