JSFiddle - React, Tailwind, and code Playground

by shojikun

HTML

<input class="button-add" type="button" value="Clone box">
<div class="form-group box template">
  <div class="col-lg-7">
    <p>Article</p>
    <select class="form-control" name="article()">
            <option value="">Smoki Coko Kokos</option>
            <option value="8">Koka Kola</option>
            <option value="10">Cipiripi</option>
        </select>
  </div>
  <div class="col-lg-3">
    <p>Quantity</p>
    <input class="form-control" value="3" name="qty()" type="text">
  </div>
  <div class="col-lg-2">
    <input class="button-remove" type="button" value="Delete box">
  </div>
</div>

CSS

.template {
  display: none;
}

JavaScript

$(document).ready(function() {

  $('.button-add').click(function() {
    //we select the box clone it and insert it after the box
    $('.box.template').clone()
      .show()
      .removeClass(".template")
      .insertAfter(".box:last");
  }).trigger("click");

  $(document).on("click", ".button-remove", function() {
    $(this).closest(".box").remove();
  });
});