JQuery - Clone DIV with button duplicates incorrectly

Question

Fairly new to programming in general, so this might not be pretty. My problem is when I click the button in the html (Fiddle)

$(document).ready(function() {
  $("button").click(function() {
    $(".groupcontainer").clone().appendTo(".groupcontainer");
  });
});

it will duplicate the first time perfectly. Then, as I keep clicking it, the div will duplicate exponentially and the format gets messy. Also, when it does add to the webpage, the parent div won't expand vertically to allow for the duplicates.

1. Need one duplicate each time the button is pressed (append to itself, if possible???)
2. When it's duplicated multiple times, need the parent div to expand with it.

I'm assuming #1 is because I'm using .groupcontainer to clone and appending it to itself - is that an issue? Can someone explain how I would clone .groupcontainer and have it append directly below itself? I've looked around but not seeing the same issue I'm having.

As for #2, does appending this way not allow the parent div to expand?

Am I so far off you want to laugh??

Answer 1

I suggest using a combination of .closest() and .parent() like so (also note my use of the flags for .clone()):

$(document).ready(function() {
  $("button").click(function() {
    var target = $(this).closest(".groupcontainer");
    target.clone(true, true).appendTo(target.parent());
    // alternatively you can also use .insertAfter() to
    // place the clone after the cloned element rather
    // than at the end of all cloned elements
    // https://api.jquery.com/insertAfter/
    /* target.clone(true, true).insertAfter(target); */
  });
});

.groupcontainer {
  background-color: white;
  height: 225px;
  float: left;
  margin-top: 10px;
}

.group {
  font-family: Arial;
  margin-right: 20px;
  font-size: 12px;
  float: left;
  background-color: black;
  padding: 2px;
  color: white;
  clear: both;
  display: inline-block;
}

.quantity {
  font-family: Arial;
  font-size: 12px;
  float: left;
  background-color: black;
  padding: 2px;
  display: inline-block;
  color: white;
}

.system {
  float: left;
  background-color: black;
  padding: 2px;
  display: inline-block;
  color: white;
  font-family: Arial;
  font-size: 12px;
}

.total {
  float: left;
  background-color: black;
  padding: 2px;
  display: inline-block;
  color: white;
  font-family: Arial;
  font-size: 12px;
}

.specs {
  float: left;
  width: 648px;
  min-height: 50px;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  clear: both;
}

.specs table {
  width: 650px !important;
}

.specs table tr {
  background-color: white !important;
}

.specs table tr td {
  font-family: Arial !important;
  font-size: 9px !important;
  padding: 0px !important;
  margin: 0px !important;
  color: black !important;
  border-bottom: 1px solid black;
}

.specs table tr td span {
  color: black !important;
  font-family: Arial !important;
  font-size: 9px !important;
  padding: 0px !important;
  margin: 0px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="groupcontainer">
  <div class="group">
    <label for="exampleInputText">Group: </label>
    <input type="text" name="group_1" id="group_1" onchange="updateDue()" />
  </div>

  <div class="quantity">
    <label for="exampleInputText">Quantity: </label>
    <input type="text" name="quantity1" id="quantity1" onchange="updateDue()" />
  </div>

  <div class="total">
    <label for="exampleInputText">System Price:</label>
    <input type="text" name="systemprice" id="systemprice" onchange="updateDue()" />
  </div>

  <div class="system">
    <label for="exampleInputText">Group Total:
      <script type="text/javascript">
        // Library ready to use:
        accounting.formatMoney(5318008);

      </script>
    </label>
    <input type="text" name="grouptotal" id="grouptotal" onchange="updateDue()" />
  </div>

  <!--begin the specs here-->

  <div class="specs">

    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>

    <button>Clone all p elements, and append them to the body element</button>

  </div>
</div>