Add LP and AP Divs

Change class name on click in jQuery

by tyddlywink

HTML

<!doctype html>
<html>

  <head>
    <title>Form with nested workpackages</title>
  </head>

  <body>
    <div class="container">
      <form>
        <button type="button" id="addLP">Add LP</button>
      </form>
    </div>

    <div id="lpTemplate" style="display: none;">
      <div id="LP-LPtemplate-div" style="border:1px solid black;background:#888888;width:90%;margin:5px;padding:5px;" data-lp-index="-LPtemplate-">LP-LPtemplate- div <br />
        <button type="button" class="removeLP">Remove </button><button type="button" class="addAP">Add AP </button><br/>
        <input type="text" class="form-control" id="lp-LPtemplate-nameinput" placeholder="<lp-LPtemplate-name>">
        <input type="text" class="form-control" id="lp-LPtemplate-typinput" placeholder="<lp-LPtemplate-typ>">
        <input type="text" class="form-control" id="lp-LPtemplate-summeinput" placeholder="<lp-LPtemplate-summe>">
      </div>
    </div>

    <div id="APTemplate" style="display: none;">
      <div id="lp-LPtemplate-AP-APtemplate-div" style="border:1px solid black;background:#58ACFA;width:75%;margin:5px;padding:5px;">lp-LPtemplate- AP-APtemplate- div <br />
        <button type="button" class="removeAP">Remove AP</button>
        <input type="text" class="form-control" id="lp-LPtemplate-ap-APtemplate-nameinput" placeholder="<lp-LPtemplate-ap-APtemplate-name>">
        <input type="text" class="form-control" id="lp-LPtemplate-ap-APtemplate-typinput" placeholder="<lp-LPtemplate-ap-APtemplate-typ>">
        <input type="text" class="form-control" id="lp-LPtemplate-ap-APtemplate-summeinput" placeholder="<lp-LPtemplate-ap-APtemplate-summe>">
      </div>
    </div>
  </body>
</html>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

$("#addLP").on("click", function() {
  var self = $(this);
  var currentLPCount = self.parents("form").children("div").length;
  var template = $("#lpTemplate").html();

  template = template.replace(/-LPtemplate-/g, currentLPCount + 1);

  self.parents("form").append(template);
  rebind();


})


var rebind = function() {

  $(".removeLP").off("click");
  $(".removeLP").on("click", function() {
    var self = $(this);

    self.parent("div").remove();

  });
  $(".addAP").off("click");
  $(".addAP").on("click", function() {
    var self = $(this);
    var lpDiv = self.parent("div");
    var currentLPindex = lpDiv.data("lp-index");
    var currentAPCount = lpDiv.children("div").length;
    var template = $("#APTemplate").html();

    template = template.replace(/-LPtemplate-/g, currentLPindex).replace(/-APtemplate-/g, currentAPCount + 1);

    lpDiv.append(template);
    rebind();

  })

  $(".removeAP").off("click");
  $(".removeAP").on("click", function() {
    var self = $(this);

    self.parent("div").remove();

  });


}