title: Having javascript apply to multiple elements created by php foreach loop
body: <p>I have this php foreach loop, which read the videos saved in a folder and load them into my page. 
  Under the videos I have created a like and dislike button, which i would like to work with javascript.
  The problem is that I cant figure out, how to point js to buttons, when i create unique ID's for the buttons, with a counter in my foreach loop. </p>
  
  <p>My php.</p>
  
  <pre><code>$i=1;
  foreach($allfiles as $file) {
  if($file != '.' &amp;&amp; $file != '..' &amp;&amp; $file != video/ini) // sikre den ikke 
  producere . og .. files
  {
  
  echo "&lt;div&gt;
          &lt;div&gt;
                          &lt;video width=\"$videoW\" height=\"$videoH\" 
  controls&gt;
                            &lt;source src=\"". $dir . $file ."\" type=\"video/mp4\"&gt;
                            &lt;source src=\"". $dir . $file ."\" type=\"video/ogg\"&gt;
                          &lt;/video&gt;
                      &lt;/div&gt;
  
  
  
  &lt;div&gt;&lt;strong&gt; Recorded:&lt;/strong&gt; $file &lt;/div&gt; &lt;/div&gt;";
  
  echo '&lt;img src="/img/like-icon.png" id="like'.$i.'" 
  style="width:40px;height:40px;"&gt;';
  echo '&lt;img src="/img/dislike-icon.png" id="dislike'.$i.'" 
  style="width:40px;height:40px;"&gt;';
  echo '&lt;p style=display:none; id="text'.$i.'"&gt;Submitted!&lt;/p&gt;';
  $i++;
  </code></pre>
  
  <p>My javascript</p>
  
  <pre><code>&lt;script type='text/javascript'&gt;  
        for (var i = 0; i &lt; 100; i++) {
  
          var button = document.getElementById(like[i]);
          var button2 = document.getElementById(dislike[i]);
  
          button.onclick = function() {
             var text = document.getElementById(text[i]);
             var like = document.getElementById(like[i]);
             var dislike = document.getElementById(dislike[i]);
             if (text.style.display !== 'none') {
                text.style.display = 'none';
  
             }
             else {
                text.style.display = 'block';
                like.style.display = 'none';
                dislike.style.display = 'none';
          }
       };
  
          button2.onclick = function() {
             var text = document.getElementById(text[i]);
             var dislike = document.getElementById(dislike[i]);
             var like = document.getElementById(like[i]);
  
             if (text.style.display !== 'none') {
                text.style.display = 'none';
  
             }
             else {
               text.style.display = 'block';
               like.style.display = 'none';
               dislike.style.display = 'none';
          }
  
  
       };
    };
  </code></pre>
  
  <p></p>