Q:

Issue in appending to the 

I've following code snippet in jQuery but having issue in it.
$(function () {
  $(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).children('td:first').find('select:first').clone();
    var tbody = $('#' + table_id + ' tbody');
    var n =  $(this).closest('table').find('select.prod_list').length+1;
    new_row.attr('id', 'reb' + no +'_'+ n);    
    $('#'+table_id).find('tbody tr:first').children('td:first').append('<div class="btn-group">'+new_row+'</div>');//Due to this line I'm getting message Object Object on screen.
  });  
});

From above code I mainly have issue in following line:
$('#'+table_id).find('tbody tr:first').children('td:first').append('<div class="btn-group">'+new_row+'</div>');

I'm getting Object Object on screen. Why so?
I've following 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>

A:

For cloned elements you are better off using appendTo() to put the item in place. Since you need to change the id of the last select list you are adding you'll need to make some more modifications to your code. In addition, you only want to append to the existing btn-group, not clone that (if I understand correctly) - 
$(document).delegate('.products','click',function (e) {
    var table_id = $(this).closest('table').attr('id');
    var first_row = $('#'+table_id).find('tbody tr:first').attr('id');
    var toBeCloned = $('#'+first_row).find('td:first').find('select:last');
    var new_row = toBeCloned.clone();
    var idCounter = toBeCloned.attr('id').split('_');
    var new_id = 'product_id_1_' + (parseInt(idCounter[3]) + 1);
    console.log(new_id);
    var elementToAppendTo = $('#'+table_id).find('tbody tr:first .btn-group:first'); 
    $(new_row).appendTo(elementToAppendTo).attr('id', new_id);     
});  

http://jsfiddle.net/jayblanchard/vUTEv/1/
This code results in thie following - 
<div class="btn-group">
    <select id="product_id_1_1" class="form-control prod_list" name="product_id_1[1]"></select>
    <select id="product_id_1_2" class="form-control prod_list" name="product_id_1[1]"></select>
    <select id="product_id_1_3" class="form-control prod_list" name="product_id_1[1]"></select>
    <select id="product_id_1_4" class="form-control prod_list" name="product_id_1[1]"></select>
    <select id="product_id_1_5" class="form-control prod_list" name="product_id_1[1]"></select>
</div>

