jQuery .clone()

[mongoose00318]

I'm trying to create a simple form that allows the user to add another item when they click a button. Here is my HTML:

<div class="row led-item">
   <div class="form-group col-10">
      <label for="exampleFormControlSelect1">Product</label>
      <select class="form-control" id="exampleFormControlSelect1">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>
   </div>
   <div class="form-group col-2">
      <label for="exampleFormControlInput1">Quantity</label>
      <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
   </div>
</div>

My JS:

//add item to request leds forms
$('#request-leds-add-item').click(function() {
    $('.led-item:first').clone().appendTo('.led-item');
});

But instead of it cloning the .led-item and inserting it after the first instance of it; it inserts it into the the first instance of .led-item like so:

<div class="row led-item">
   <div class="form-group col-10">
      <label for="exampleFormControlSelect1">Product</label>
      <select class="form-control" id="exampleFormControlSelect1">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>
   </div>
   <div class="form-group col-2">
      <label for="exampleFormControlInput1">Quantity</label>
      <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
   </div>
   <div class="row led-item">
      <div class="form-group col-10">
         <label for="exampleFormControlSelect1">Product</label>
         <select class="form-control" id="exampleFormControlSelect1">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
         </select>
      </div>
      <div class="form-group col-2">
         <label for="exampleFormControlInput1">Quantity</label>
         <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
      </div>
   </div>
</div>

 

[mongoose00318]

Kind of have it working now but it's doubling everything up each time instead of just adding one more element : 

$('.led-item').first().clone().insertAfter('.led-item');

 

[mongoose00318]

It seems like a selector problem. It doesn't seem to matter if I use .first() or .last() or nothing at all; when I dump it to the console it is selecting all .led-item(s)

[mongoose00318]

var template = $('#request_led_dialog .led-item:first').clone();
template.insertAfter('#request_led_dialog .led-item:last');

This seems to have fixed it.