How to avoid appending rest of the <td>s except first one from a new <tr> appended to the <tbody> using jQuery?

I've a table in HTML. Actually there can be many such tables present with different Ids. I'm appending a new table row on click of a button using jQuery. The table has six columns. The first row of a table which is present when the page loads contains HTML elements in all it's six columns. The next row contains Add button in first column with other five <td></td>When I click on this Add button I want to append a new row which will contain only first <td> with it's HTML element and other five <td></td> shouldn't be displayed. How to achieve this? My HTML is as follows:

<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>

The jQuery function I've written to append a new row is as follows:

$(function () {
//function to create new row in add rebate by product grid 
  $(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);

    //function to delete row from add rebate by product grid 
    $('.delete').on('click', deleteRow);      
  });  
});

I'm able to append the new table row successfullly in each of the tables present on page. There is no issue with it. The issue I want solution for it is the rest of the <td></td> should not displayed in a newly added row. Due to these blank <td></td> the table seems incomplete to the user. Only first column should be displayed over there. How to achieve this? Can some one please help me in this regard? I'm using jquery-1.9.1.min.js.
My jsFIddle.

In jsFiddle table borders are not displayin but in my working instance it does. I don;t want to show those blank <td></td>s.

Add this line to your jQuery function right after the statement tbody.append(new_row);

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

Hope it will help you.