title: How to get specific HTML control from a <table><tr><td></td></tr></table> and append the selected control to the same <td>?
body: <p>I've following table in HTML:</p>
  
  <pre><code>&lt;table id="blacklistgrid_1"  class="table table-bordered table-hover table-striped"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th style="vertical-align:middle"&gt;Products&lt;/th&gt;
        &lt;th style="vertical-align:middle"&gt;Pack Of&lt;/th&gt;
        &lt;th style="vertical-align:middle"&gt;Quantity&lt;/th&gt;
        &lt;th style="vertical-align:middle"&gt;Volume&lt;/th&gt;
        &lt;th style="vertical-align:middle"&gt;Unit&lt;/th&gt;
        &lt;th style="vertical-align:middle"&gt;Rebate Amount&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody class="apnd-test"&gt;
      &lt;tr id="reb1_1"&gt;
        &lt;td&gt;
          &lt;div class="btn-group"&gt;
            &lt;select name="product_id_1[1]" id="product_id_1_1" class="form-control prod_list"&gt;
              &lt;option value=""  selected='selected'&gt;Select Product&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;input type="text" name="pack[1]" id="pack_1" value="" class="form-control" size="8"/&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="text" name="quantity[1]" id="quantity_1" value="" class="form-control" size="8"/&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="text" name="volume[1]" id="volume_1" value="" class="form-control" size="8"/&gt;&lt;/td&gt;
        &lt;td&gt;
          &lt;div class="btn-group"&gt;
            &lt;select name="units[1]" id="units_1" class="form-control"&gt;
              &lt;option value=""  selected='selected'&gt;Select Unit&lt;/option&gt;
              &lt;option value="5" &gt;Microsecond&lt;/option&gt;
              &lt;option value="7" &gt;oz&lt;/option&gt;
              &lt;option value="9" &gt;ml&lt;/option&gt;
              &lt;option value="10" &gt;L&lt;/option&gt;
              &lt;option value="12" &gt;gms&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;input type="text" name="amount[1]" id="amount_1" value="" class="form-control" size="9"/&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
    &lt;tfoot&gt;
      &lt;tr id="reb1_2"&gt;
        &lt;td&gt;&lt;button style="float:right; margin-bottom: 20px" class="products" type="button" class="btn btn-default" onclick=""&gt;&amp;nbsp;Add&lt;/button&gt;&lt;/td&gt;
        &lt;td colspan="5"&gt;&lt;/td&gt;                            
      &lt;/tr&gt;
    &lt;/tfoot&gt;                                           
  &lt;/table&gt;
  </code></pre>
  
  <p>Now I've to append the</p>
  
  <p><code>&lt;select name="product_id_1[1]" id="product_id_1_1" class="form-control prod_list"&gt;
     &lt;option value=""  selected='selected'&gt;Select Product&lt;/option&gt;
   &lt;/select&gt;</code> </p>
  
  <p>to the <code>&lt;td&gt;</code> in which it is present currently on the click of Add button. Previously the functionality was of adding the entire row with <code>&lt;select&gt;&lt;/select&gt;</code> in first <code>&lt;td&gt;</code> of a new <code>&lt;tr&gt;</code> but now the requirement is to append the <code>&lt;select&gt;&lt;/select&gt;</code> to the existing <code>&lt;td&gt;</code> only. My previous code is as follows:</p>
  
  <pre><code>$(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);
      $('&lt;button style="color:#C00; opacity: 2;margin-top: 6px;" type="button" class="close delete" data-dismiss="alert" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;').appendTo( $(new_row.find('td:first')) );
      tbody.append(new_row);
  
      $(new_row).children('td').not('td:eq(0)').remove();    
    });
  </code></pre>
  
  <p>But please note that the id and name of the <code>&lt;select&gt;&lt;/select&gt;</code> to be appended should be in same fashion as of my previous functionality. You can refer above code for it. Thanks in advance.</p>