title: jQuery pass input value based on table row
body: <p>I know very little jquery so please excuse me if I don't make much sense. </p>
  
  <p>I have a table that it's rows are populated from a php db query (the number of rows will vary) in this case there are two rows of data. Here is a portion of the php generated html table.</p>
  
  <pre><code>&lt;table border=1 width=800px id=workout&gt;
   &lt;tr&gt;
   &lt;th width=300px id=clients&gt;Client&lt;/th&gt;
   &lt;th width=200px id=movements&gt;Movements&lt;/th&gt;
   &lt;th&gt;X Completed&lt;/th&gt;
   &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;&lt;input type="hidden" name="client_id[]" class="clientval" value="1"&gt;&lt;/td&gt;   
  &lt;td&gt;
  &lt;select name="movement[]" width=200 class='typeval' onchange='changeMovement()'&gt;
                &lt;option value="select"&gt;Select...&lt;/option&gt;
                &lt;option&gt;Key Movement&lt;/option&gt;
                &lt;option&gt;Movement -1&lt;/option&gt;
                &lt;option selected="selected" &gt;Movement -2&lt;/option&gt;
                &lt;option&gt;Movement -3&lt;/option&gt;
                &lt;option&gt;Movement -4&lt;/option&gt;
          &lt;/select&gt;
  &lt;/td&gt;
  &lt;td&gt;&lt;label id="count"&gt;&lt;/label&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;&lt;input type="hidden" name="client_id[]" class="clientval" value="8"&gt;
  &lt;td&gt;
  &lt;select name="movement[]" width=200 class='typeval' onchange='changeMovement()'&gt;
                &lt;option value="select"&gt;Select...&lt;/option&gt;
                &lt;option&gt;Key Movement&lt;/option&gt;
                &lt;option&gt;Movement -1&lt;/option&gt;
                &lt;option selected="selected" &gt;Movement -2&lt;/option&gt;
                &lt;option&gt;Movement -3&lt;/option&gt;
                &lt;option&gt;Movement -4&lt;/option&gt;
          &lt;/select&gt;
  &lt;/td&gt;
  &lt;td&gt;&lt;label id="count"&gt;&lt;/label&gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>I am passing the values of <code>movement</code> and <code>client_id</code> to a <code>POST</code> jquery so I can run a php query on the data and return result. How do I pass along the value of selected movement and client_id based on the row that the select menu is in. </p>
  
  <p>For example: if user changes movement drop down menu on the 2nd row I want to send the <code>client_id</code> and the <code>selected&gt;Movement&lt;</code> to the jQuery function. Right now it is just getting the first row of my table and that is all.</p>
  
  <p>Here is my edited jQuery:</p>
  
  <p>Edited:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  var typeval,clientval, class_id;
  $('.typeval').on('change', function(){
      movement =  $(".typeval option:selected").val();
      client_id = $(this).parents('tr').find('input.clientval').val();
      class_id = $(&lt;? echo $class_id; ?&gt;).val();
  
      //console.log($(this).parents('tr').find('input.clientval').val(), $(this).val());
      $.ajax(
      { url: "movement_count.php",
        type: "post",
        data: {typeval:typeval, client_id: clientval, class_id :},
        dataType: "json",
        });
  
      success: (function(output) {
      alert(output);
      $(".count").html(output);
      })
   });
  
  &lt;/script&gt;   
  </code></pre>