[FIXED] How to append dynamic content with JQuery without duplicated?

Issue

Hi I have a source code like this, the problem is when I click on button with class "addInput", it triggers function in both places and the number of each Chapter goes wrong

How can I make "Add Chapter" buttons from outside the new season appended and inside the new season appended work separately and the number of chapter go right??

My question on JSFiddle: https://jsfiddle.net/t80a7gps/

The source code:

<div class="adp-box">
  <div class="inputWrapper"></div>
  <button class="btn btn-success addInput">
    Add New Chapter
  </button>
  <hr />
  <div class="seasonsWrapper"></div>
  <button class="btn btn-primary addSeasons">
   Add New Season
  </button>
</div>

and script

  $(document).ready(function () {
    let randId = 1;
    $(document).on("click", "button.addInput", function (e) {
      e.preventDefault();
      build_inputs($(this), input_str);
    });
    $(".addSeasons").on("click", function (e) {
      e.preventDefault();
      build_seasons($(this));
    });

    let input_str = {
      title: "chap",
      forms: [
        {
          type: "text",
          name: "name",
          class: "form-control mb-2",
          placeholder: "Description",
          disabled: false
        },
        {
          type: "text",
          name: "link",
          class: "form-control mb-2",
          placeholder: "Link trailer",
          disabled: false
        },
        {
          type: "text",
          name: "link_sub",
          class: "form-control mb-2",
          placeholder: "Subtitles",
          disabled: false
        }
      ]
    };

    function build_inputs(e, configs = false) {
      if (!configs) {
        configs = {
          title: "Chapter",
          forms: [
            {
              type: "text",
              name: "name",
              class: "form-control mb-2",
              placeholder: "Enter Data..."
            }
          ]
        };
      }
      let ind =
        $(".adp-slides").length > 0 ? $(".adp-slides").length + 1 : 1;
      let str = `<div id="${
        configs.title + "-" + ind
      }" class="row adp-slides">
      <div class="col-md-10">
      <div class="form-group">
      <label><b>${"Chapter"} ${ind}</b></label>`;

      for (let config of configs.forms) {
        if (config.type === "file") {
          if (config.name === "movie") {
            str += `<input type="${config.type}" name="${
              config.name
            }" id="adpElemMoive${randId}" class="adpInputs ${
              config.class
            }" data-rel="${configs.title + "-" + ind}" placeholder="${
              config.placeholder
            }" onchange = "prepareUpload(this);">`;
            console.log(`adpElemMoive${randId}`);
          } else {
            str += `<input type="${config.type}" name="${
              config.name
            }" id="adpElemMoiveSubs${randId}" class="adpInputs ${
              config.class
            }" data-rel="${configs.title + "-" + ind}" placeholder="${
              config.placeholder
            }" onchange = "prepareUpload(this);">`;
          }
        } else {
          str += `<input type="${config.type}" name="${
            config.name
          }" id="adpElem${randId}" class="adpInputs ${
            config.class
          }" data-rel="${configs.title + "-" + ind}" placeholder="${
            config.placeholder
          }" ${config.disabled ? "disabled" : ""} >`;
        }
      }

      str += `</div>
      </div>
      <div class="col-md-2">
      <span class="badge badge-danger removeSlide" data-target="${
        configs.title + "-" + ind
      }"><i class="fas fa-trash-alt">Delete Chapter ${ind}</i>
      </span><br /><br />
      </div>
              </div>`;
      $(".inputWrapper").append(str);

      $(".removeSlide").click(function () {
        $("#" + $(this).attr("data-target")).remove();
      });

      randId++;
    }

    function build_seasons(e, configs = false) {
      let ind =
        $(".new-seasons-box").length > 0
          ? $(".new-seasons-box").length + 2
          : 2;
      let str = `<div id="${"season"}-${ind}" class="row new-season-box">
      <div class="col-md-10"><div class="form-group"><label><b>${"Season"} ${ind}</b></label>`;
      str += `</div>
      <div class="inputWrapper"></div>
      <button type="button" class="addInput">Add Chapter for this Season</button>

      </div>
              <div class="col-md-2">
      <span class="badge badge-danger removeSlide" data-target="${"season"}-${ind}"><i class="fas fa-trash-alt">Delete Season ${ind}</i>
      </span><br /><br />
      </div>
              </div>`;
      $(".seasonsWrapper").append(str);

      $(".removeSlide").click(function () {
        $("#" + $(this).attr("data-target")).remove();
      });
    }
  });

Solution

You pass in $(this) but don't (appear) to use it (hard to tell with variable name e).

build_inputs($(this), input_str);

Instead, pass in the parent "box"/wrapper and then when you append, you can append to just that box.

wrapper.append(str);

Same for counting how many chapters in that season:

let ind =
       wrapper.find(".adp-slides").length > 0 ? wrapper.find(".adp-slides").length + 1 : 1;

This will leave your $(".removeSlide").click which has a number of issues, notably that every new slide adds a new click handler to all the remove buttons, which you don't want; and secondly that it removes all with the same target. Caused by re-using IDs when the chapter is the same.

Use DOM navigation to find the related chapter to remove:

 wrapper.find(".removeSlide").click(function() {
   $(this).closest(".adp-slides").remove();
 });

Updated fiddle: https://jsfiddle.net/t80a7gps/1/

---

Note your code will reuse numbers when removing because you count number of chapters rather than storing how many have been added. Fix depends on what you want to do with "gaps" - either leave gaps and add the next number, eg 1,2,3 / remove 2 leaving 1,3 / next = 4 or renumber gaps - 1,2,3 / remove 2 leaving 1,2.

Answered By - freedomn-m

Answer Checked By - David Marino (PHPFixing Volunteer)