How to get select from droplist in each row in another table?

1

I have web page with 3 drop down menu list and one description box.
and there is infinity table with 5 columns with the button (Save)
when user click on (Save) button … new row will add to the table.
now I need to get the data that user selected from drop menu list into the table and click (Save) to add new row in the table an choose new data from the drop menu to add them in the new row in the table…

<table>
<tr><td><select id="select1">
      <option value="$">--Please Select--</option>
      <option value="val1">value 1</option>
      <option value="val2">value 2</option>
      <option value="val3">value 3</option>
</select></td></tr>
<tr><td><select id="select2">
      <option value="$">--Please Select--</option>
      <option value="val1">value 1</option>
      <option value="val2">value 2</option>
      <option value="val3">value 3</option>
</select></td></tr>
<tr><td><select id="select3">
      <option value="$">--Please Select--</option>
      <option value="val1">value 1</option>
      <option value="val2">value 2</option>
      <option value="val3">value 3</option>
</select></td></tr>
<td>Maintenance Plan:<br>
   <input type="textarea" name="pavplan" id="select3"  />
   </td><td id="row-3"></td><br></table>
<input type="submit" class="button add_another" value="Save"/>
<table id="tbl" style="width: 67%">
<thead>
  <tr>
	<th>Location</th>
	<th>Pavement Type</th>
	<th>severity</th>
	<th>Maintenance Plan</th>
</tr>
</thead>
   <tr>
      <td id="row-1"><input type="text"  name="loca" disabled /></td>
      <td id="row-2"><input type="text"  name="type" disabled /></td> 
      <td id="row-3"><input type="text"  name="seve" disabled /></td>
      <td id="row-4"><input type="text"  name="plan" disabled /></td>
   </tr>
</table>

<script>
$('select').change(function() {
      var $this = $(this);
      $this.parent().siblings('td[id^=row-]').html($this.val());
});
$('document').ready(function() {
  $('.add_another').click(function() {
      $("#tbl").append('<tr><td id="row-1"><input type="text" class="txtbox" value="" disabled/></td><td id="row-2"><input type="text" class="txtbox" value="" disabled/></td><td id="row-3"><input type="text" class="txtbox" value="" disabled/></td><td id="row-4"><input type="text" class="txtbox" value="" disabled/></td></tr>');
   });
</script>

I have a problem here I can;t get the values into the table
How can I get it please?