javascript - から特定の HTML コントロールを取得する方法選択したコントロールを同じ ?

Question

HTMLで次の表を作成しました：

<table id="blacklistgrid_1"  class="table table-bordered table-hover table-striped">
  <thead>
    <tr>
      <th style="vertical-align:middle">Products</th>
      <th style="vertical-align:middle">Pack Of</th>
      <th style="vertical-align:middle">Quantity</th>
      <th style="vertical-align:middle">Volume</th>
      <th style="vertical-align:middle">Unit</th>
      <th style="vertical-align:middle">Rebate Amount</th>
    </tr>
  </thead>
  <tbody class="apnd-test">
    <tr id="reb1_1">
      <td>
        <div class="btn-group">
          <select name="product_id_1[1]" id="product_id_1_1" class="form-control prod_list">
            <option value=""  selected='selected'>Select Product</option>
          </select>
        </div>
      </td>
      <td><input type="text" name="pack[1]" id="pack_1" value="" class="form-control" size="8"/></td>
      <td><input type="text" name="quantity[1]" id="quantity_1" value="" class="form-control" size="8"/></td>
      <td><input type="text" name="volume[1]" id="volume_1" value="" class="form-control" size="8"/></td>
      <td>
        <div class="btn-group">
          <select name="units[1]" id="units_1" class="form-control">
            <option value=""  selected='selected'>Select Unit</option>
            <option value="5" >Microsecond</option>
            <option value="7" >oz</option>
            <option value="9" >ml</option>
            <option value="10" >L</option>
            <option value="12" >gms</option>
          </select>
        </div>
      </td>
      <td><input type="text" name="amount[1]" id="amount_1" value="" class="form-control" size="9"/></td>
    </tr>
  </tbody>
  <tfoot>
    <tr id="reb1_2">
      <td><button style="float:right; margin-bottom: 20px" class="products" type="button" class="btn btn-default" onclick="">&nbsp;Add</button></td>
      <td colspan="5"></td>                            
    </tr>
  </tfoot>                                           
</table>

今、私は追加する必要があります

<select name="product_id_1[1]" id="product_id_1_1" class="form-control prod_list"> <option value="" selected='selected'>Select Product</option> </select>

<td>[追加] ボタンをクリックすると、現在存在する に追加されます。以前は、行全体<select></select>を最初<td>に新しいものに追加する機能がありまし<tr>たが、現在の要件は<select></select>、既存の<td>もののみに追加することです。私の以前のコードは次のとおりです。

$(document).delegate('.products','click',function (e) {
    var table_id = $(this).closest('table').attr('id');
    var no = table_id.match(/\d+/)[0];            
    var first_row = $('#'+table_id).find('tbody tr:first').attr('id');
    var new_row = $('#'+first_row).clone();
    var tbody = $('#' + table_id + ' tbody');
    var n = $('tr', tbody).length  + 1;
    new_row.attr('id', 'reb' + no +'_'+ n);    

    $(':input', new_row).not('.prod_list').remove();
    $('select', new_row).attr('name','product_id_'+no+'['+n+']');
    $('select', new_row).attr('id','product_id_'+no+'_'+n);
    $('<button style="color:#C00; opacity: 2;margin-top: 6px;" type="button" class="close delete" data-dismiss="alert" aria-hidden="true">&times;</button>').appendTo( $(new_row.find('td:first')) );
    tbody.append(new_row);

    $(new_row).children('td').not('td:eq(0)').remove();    
  });

ただし、追加する の ID と名前は<select></select>、以前の機能と同じようにする必要があることに注意してください。上記のコードを参照できます。前もって感謝します。