动态添加和删除div行到fieldset，JQuery

Question

I have a fieldset below

<fieldset>
    <div class="panel panel-default">
        <div class="panel-heading clearfix">Collection photos</div>
            <div class="panel-body shopping-cart">
                <div class="row product-list title hidden-xs">
                    <div class="col-xs-4 col-sm-4">Product</div>
                    <div class="col-xs-6 col-sm-6 title">Description</div>
                    <div class="col-xs-1 center col-sm-1">Action</div>
                </div>
                <div class="row product-list">
                    <div class="col-xs-4 col-sm-4">
                        <a href="product.php">
                            <img src="images/products/1.jpg" class="img-responsive"  alt="product">
                        </a>
                    </div>
                    <div class="col-xs-6 col-sm-6 title">
                        <textarea id="txtDescription" rows="2">Photo Description</textarea>
                    </div>
                    <div class="col-xs-1 col-sm-1 center">
                        <label>Open
                            <i class="fa fa-folder-open-o fa-2x">
                                <input type="file" style="display: none">
                             </i>
                        </label>
                    </div>
                </div>
                <div class="row product-list grandtotal">
                    <div class="col-xs-4 col-sm-4">Total</div>
                    <div class="col-xs-6 col-sm-6 title">
                        <label for="lblPhotoTotal">0</label>
                    </div>
                    <div class="col-xs-1 center col-sm-1">
                       <a href="#" class="btn btn-primary" id="btnAdd">Add</a>
                    </div>          
                </div>
            </div>
       </div>
</fieldset>  

I have three rows at the moment , THe first contain the fieldset header, the second is the default first field. The third contains by buttons (ie add button). I want to add another row similar to the second row when ever a user click the add button . I want the row to be right before the last row containing my add button . When i try the Jquery below , it seems to be selecting my fieldset to right to the panel-body and shopping-cart classes.

$('fieldset').find('.panel-body ,.shopping-cart');

However , my new row is not appending. Please how to i append the new instance of the second row right before the last row each time the button is click ? ie

<div class="row product-list">
    <div class="col-xs-4 col-sm-4">
        <a href="product.php">
            <img src="images/products/1.jpg" class="img-responsive"  alt="product">
        </a>
    </div>
    <div class="col-xs-6 col-sm-6 title">
         <textarea id="txtDescription" rows="2">Photo Description</textarea>
    </div>
    <div class="col-xs-1 col-sm-1 center">
        <label>Open
            <i class="fa fa-folder-open-o fa-2x">
                <input type="file" style="display: none">
            </i>
        </label>
    </div>
</div>

Answer 1

This is how I would do it:

$("#btnAdd").click(function() {
  $($(".shopping-cart").children().get(1)).clone().insertBefore($(".shopping-cart").children().last());
});

Here is the JSFiddle demo

Answer 2

I made a little example in jsFiddle. It is just to show you how it could work.

HTML

<table>
<thead>
  <tr>
    <th>Date</th>
    <th>Name</th>
    <th>Gender</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>05/01/2016</td>
    <td>John Doe</td>
    <td>Male</td>
  </tr>
  <tr>
    <td>05/01/2016</td>
    <td>Jane Doe</td>
    <td>Female</td>
  </tr>
  <tr>
    <td colspan="3" class="button">
      <button id="newRow">
      add row
      </button>
    </td>
  </tr>
</tbody>
</table>

Some CSS

table {
  border: 2px solid black;
}

th {
  border-bottom: 2px solid black;
}

.button {
  text-align: center;
}

button {
  width: 100%;
}

jQuery

$("#newRow").click(function() {
  $(this).parents("tr").before($(this).parents("tr").prev().clone());
})

You just have to clone your previous row-element ( <tr> ) and place it before the row where your button is in. .parents("tr") finds the closest parent that is a <tr> -element) and .before() places whatever you want before the element you're using it on (in your case, the row with your button)

UPDATE Optimized my code, read the question wrong. I thought it was just about appending a new row, not cloning the previous one.

Answer 3

I would choose CSS selectors to copy a blank new row.

// Get row while its blank
var row = $('.product-list:nth-child(2)').clone();

// Copy blank row everytime the user clicks
$('#btnAdd').on('click', function () {
    row.clone().insertBefore('.product-list:last-child')
});

If you want to copy the previous row you could use this

$('#btnAdd').on('click', function () {
    $('.product-list:nth-last-child(2)').clone().insertBefore('.product-list:last-child');
});