title: JQuery Click handler only works on first item
body: <p>With a table I am making I have to make something that will be able to change a value in the database for each row. The problem is that the situation I have right now only affects the tr in the table and not the other tr's.</p>
  
  <p>I am working with Flight (MVC) and this is my code:
  The View:</p>
  
  <pre><code>&lt;tbody&gt;
  &lt;?php foreach($this-&gt;objarrAll as $key =&gt; $value){ ?&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;?= $value['category']; ?&gt;&lt;/td&gt;
      &lt;td&gt;&lt;?= $value['user_send']; ?&gt;&lt;/td&gt;
      &lt;td&gt;&lt;?= $value['points']; ?&gt;&lt;/td&gt;
      &lt;td&gt;&lt;a href="javascript:void(0)" data-toggle="modal"
             data-target="#modal-view-&lt;?= $value['id']; ?&gt;"&gt;Bekijken&lt;/button&gt;&lt;/td&gt;
      &lt;div id="modal-view-&lt;?= $value['id']; ?&gt;" class="modal fade" role="dialog"&gt;
          &lt;div class="modal-dialog modal-lg"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                      &lt;h4 class="modal-title"&gt;Inzending van &lt;?= $value['user_send']; ?&gt;&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                      &lt;p&gt;&lt;img width="868px"
                              src="#"&gt;
                      &lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                      &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Sluiten&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;input type="hidden" id="uid" value="&lt;?= $value['user_send']; ?&gt;"/&gt;
      &lt;input type="hidden" id="points" value="&lt;?= $value['points']; ?&gt;"/&gt;
      &lt;input type="hidden" id="row_id" value="&lt;?= $value['id']; ?&gt;"/&gt;
      &lt;td&gt;&lt;a class="submitPoints" href="javascript:void(0)"&gt;Geef punten&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;?php } ?&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>The Javascript/AJAX-code:</p>
  
  <pre><code>$(".submitPoints").on("click", function () {
  
      var uid = $('#uid').val();
      var points = $('#points').val();
      var row_id = $('#row_id').val();
  
      var data = {
          uid: uid,
          points: points,
          row_id: row_id
      };
  
      $.ajax({
          type: "POST",
          url: "/update/user/points",
          async: true,
          data: data,
          success: function (data) {
              console.log("De " + points + " punten zijn toegekend aan " + uid + "");
              var err = jQuery.parseJSON(data);
              sendAlert.createAlert(err.return, err.type);
              $("#check-view").load("/admin/table/check/all", function () {
              });
          }
      });
  
  
  });
  </code></pre>
  
  <p>The Model and Controller are working fine, because the SQL query is being executed.</p>