title: All buttons firing at the same time when clicking
body: <p>I'm trying to create a favorite-button for every video thumbnail that is generated by <code>"id"</code>, but every time I click one of the buttons all of them fire at the same time so instead of getting the correct value of the video-id I get only the first id from the list of videos.</p>
  
  <p>In conclusion the button kind of works but does not get the correct values.</p>
  
  <p>I've tried a few things but sadly they did not work, the output being the same or resulted in an error.</p>
  
  <ol>
  <li>I generated different ids and names for my buttons hoping that they will not fire at the same time.</li>
  <li>I moved the buttons outside the generated thumbnail code and applied a static value to see if I would get the correct id.</li>
  </ol>
  
  <p>video.js:</p>
  
  <pre><code>$(document).ready(function() {
      var video_id    = $("input[name='video_id']").val();
      var vwidth      = 854;
      var vheight     = 520;
      var playerc     = $("#player-container");
      var width       = playerc.width();
      var height      = Math.round(width / (vwidth / vheight));
      });
  
  $("button[id='favorite']").click(function(e) {
          e.preventDefault();
  
          $.ajax({
              url: base_url + '/ajax.php?s=video_favorite',
              cache: false,
              type: "POST",
              dataType: "json",
              data: {video_id: video_id},
              success: function(response) {
                  if (response.status == '1') {
                      $("button[id='favorite']").html(response.count);
                      $("button[id='favorite']").prop('disabled', true);
                  } else {
                      $("#response-container").html(close + response.msg);
                      $("#response-container").removeClass('alert-success').addClass('alert-danger');
                      $("#response-container").show();
                  }
              }
          });
      });
  
  </code></pre>
  
  <p>The code where thumbnails are being generated: </p>
  
  <pre><code> &lt;div id="response-container" class="alert alert-dismissible" role="alert" style="display: none;"&gt;&lt;/div&gt;
  &lt;ul class="videos&lt;?php if ($this-&gt;related): echo ' related'; endif; if (isset($this-&gt;menu) &amp;&amp; $this-&gt;menu == 'search'): echo ' svideos'; endif; ?&gt;"&gt;
  
  &lt;input name="video_id" class="tags" type="hidden" value="&lt;?php echo $video['video_id']; ?&gt;" /&gt;
  
  &lt;?php $ids = array(); foreach ($this-&gt;matches as $index =&gt; $video_id): if (isset($this-&gt;videos[$video_id])): $video = $this-&gt;videos[$video_id]; $ids[] = $video_id; $percent = ($video['likes'] &gt; 0 &amp;&amp; $video['rated_by']) ? round($video['likes']*100/$video['rated_by']) : 100; ?&gt;
  
  &lt;li id="video-&lt;?php echo $video['video_id']; ?&gt;" class="dropdown thumbnail" data-percent="&lt;?php echo $percent; ?&gt;" data-likes="&lt;?php echo $video['likes']; ?&gt;" data-rated="&lt;?php echo $video['rated_by']; ?&gt;"&gt;
  
  &lt;a href="&lt;?php echo url($video['video_id'], $video['url'], $video['slug']); ?&gt;" target="_blank" class="video" title="&lt;?php echo e($video['title']); ?&gt;"&gt;
  
  &lt;button id="favorite" class="btn btn-default btn-mb" data-toggle="tooltip" data-placement="top" title="&lt;?php echo __('favorite-help'); ?&gt;"&gt;&lt;span class="glyphicon glyphicon-heart"&gt;&lt;/span&gt;&lt;/button&gt;
  
      &lt;/a&gt;
       &lt;/li&gt;
     &lt;?php endif; endforeach; p('ctr', $ids); ?&gt;
  &lt;/ul&gt;               
  </code></pre>
  
  <p>My goal is to only click one button and not have them all fire at the same time and get the correct id into the value of my input.</p>