title: How is the process done by detecting all the data on the page using jQuery?
body: <p>I want to make a progress bar that counts forward with the specified start date and end date line. I can perform the operation I want with the code I wrote. But since there is a lot of code, there is confusion.</p>
  
  <p>I want to follow a more logical way. My current codes are listed below.</p>
  
  <p><strong>MY HTML:</strong></p>
  
  <pre><code>&lt;div id="div1"&gt;&lt;/div&gt;
  &lt;div id="div2"&gt;&lt;/div&gt; 
  </code></pre>
  
  <p><strong>MY jQuery + PHP:</strong></p>
  
  <pre><code>progressBar(&lt;?php echo strtotime("2020-02-20 10:00:00"); ?&gt;, &lt;?php echo strtotime("2020-02-20 15:00:00"); ?&gt;, &lt;?php echo time(); ?&gt;, '#div1');
  progressBar(&lt;?php echo strtotime("2020-02-20 04:00:00"); ?&gt;, &lt;?php echo strtotime("2020-02-20 09:00:00"); ?&gt;, &lt;?php echo time(); ?&gt;, '#div2');
  
  
  /** Start Time, Stop Time, Now Time, Element Id **/
  function progressBar(start, stop, now, element) {
      now++
      var timepast = now - start;
      var duration = stop - start;
      var percent  = ( 100 - ( timepast / duration ) *100 ).toFixed(2);
  
      $(element).text(percent);
  
      var timer = setTimeout(function(){ 
          progressBar(start, stop, now);
      }, 1000);
  
      if( percent &lt; 0){
          clearInterval(timer);
      }
  }
  </code></pre>
  
  <p><strong>Desired Method/Result:</strong></p>
  
  <p>I want it to automatically detect and count in real time all the elements that are set as follows.</p>
  
  <p>I need jQuery (Javascript) codes to detect these HTML codes.</p>
  
  <pre><code>&lt;div id="div1" data-start="2020-02-20 10:00:00" data-stop="2020-02-20 15:00:00"&gt;&lt;/div&gt;
  &lt;div id="div2" data-start="2020-02-20 04:00:00" data-stop="2020-02-20 09:00:00"&gt;&lt;/div&gt;
  </code></pre>