How to use same Dynamic input field multiple times-CodePudding

I trying to create dynamic input field, Found this code but unable to use this code twice. I mean two different dynamic input field.I have added the code.There is limited input field can be added, in this.Please help

Here is the Html code

<section >
    <par-div ><label for="auth">Author<span>*</span><i ></i>
            <par-sep >Enter Author's Name</par-sep>
        </label></par-div>
    <par-div >
        <par-sep id="dynamic-field-1" >
            <input  placeholder="Author" type="text" id="field" name="field[]">
        </par-sep>
        <button type="button" id="add-button" >Add More</button>
        <button type="button" id="remove-button"  disabled="disabled">Remove Last</button>
    </par-div>
</section>

Here is the Jquery code

var buttonAdd = $("#add-button");
var buttonRemove = $("#remove-button");
var className = ".dynamic-field";
var count = 0;
var field = "";
var maxFields = 5;

function totalFields() {
    return $(className).length;
}

function addNewField() {
    count = totalFields()   1;
    field = $("#dynamic-field-1").clone();
    field.attr("id", "dynamic-field-"   count);
    field.children("label").text("Field "   count);
    field.find("input").val("");
    field.css({ 'margin': '5px 0' });
    $(className   ":last").after($(field));
}

function removeLastField() {
    if (totalFields() > 1) {
        $(className   ":last").remove();
    }
}

function enableButtonRemove() {
    if (totalFields() === 2) {
        buttonRemove.removeAttr("disabled");
    }
}

function disableButtonRemove() {
    if (totalFields() === 1) {
        buttonRemove.attr("disabled", "disabled");
    }
}

function disableSEC() {
    if (totalFields() === maxFields) {
        buttonAdd.attr("disabled", "disabled");
    }
}

function enableSEC() {
    if (totalFields() === (maxFields - 1)) {
        buttonAdd.removeAttr("disabled");
    }
}

buttonAdd.click(function () {
    addNewField();
    enableButtonRemove();
    disableSEC();
});

buttonRemove.click(function () {
    removeLastField();
    disableButtonRemove();
    enableSEC();
});

CodePudding user response：

The main problem with your code was in the addNewField function and that's the only thing I changed in this snippet. This is the function changed:

function addNewField() {
  count = totalFields()   1;
  
  field = $("#dynamic-field-1").clone(true);
  field.attr("id", `dynamic-field-${count}`);
  field.find("input").val("");
  field.find("input").attr('id', `field-${count}`);
  field.css({'margin': '5px 0'});
  $(className   ":last").after($(field));
}

You were cloning an existing element to create the next dynamic field but you were not changing the id of the nested input element. Remember you cannot have two element with the same id in the document.

Now every input field will have a progressive id (using count) like you already did with the dynamic-field.

I also used string template literals instead of using concatenation.

I should also say that your par-div and par-sep elements are invalid in terms of html5 (unless you are using custom elements) and this whole strategy was better implemented using the <template> element:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

The <template> HTML element is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript.

And I also added the definition of the two custom elements <par-div> and <par-sep> so that both now have display: block; by default. Anyway it's worth saying that, if the functionality of those elements don't go further than that, it was far enough to have them a class bound to a css rule that styled them as such.

Now the rendering of the page is accurate and it's shown how to correctly define those.

class ParDiv extends HTMLDivElement {
  constructor() {
    super();
    this.style.display = "block";
  }
}
class ParSep extends HTMLDivElement {
  constructor() {
    super();
    this.style.display = "block";
  }
}
customElements.define("par-div", ParDiv, { extends: "div" });
customElements.define("par-sep", ParSep, { extends: "div" });

var buttonAdd = $("#add-button");
var buttonRemove = $("#remove-button");
var className = ".dynamic-field";
var count = 0;
var field = "";
var maxFields = 5;

function totalFields() {
  return $(className).length;
}

function addNewField() {
  count = totalFields()   1;
  
  field = $("#dynamic-field-1").clone(true);
  field.attr("id", `dynamic-field-${count}`);
  field.find("input").val("");
  field.find("input").attr('id', `field-${count}`);
  field.css({'margin': '5px 0'});
  $(className   ":last").after($(field));
}

function removeLastField() {
  if (totalFields() > 1) {
    $(className   ":last").remove();
  }
}

function enableButtonRemove() {
  if (totalFields() === 2) {
    buttonRemove.removeAttr("disabled");
  }
}

function disableButtonRemove() {
  if (totalFields() === 1) {
    buttonRemove.attr("disabled", "disabled");
  }
}

function disableSEC() {
  if (totalFields() === maxFields) {
    buttonAdd.attr("disabled", "disabled");
  }
}

function enableSEC() {
  if (totalFields() === (maxFields - 1)) {
    buttonAdd.removeAttr("disabled");
  }
}

buttonAdd.click(function() {
  addNewField();
  enableButtonRemove();
  disableSEC();
});

buttonRemove.click(function() {
  removeLastField();
  disableButtonRemove();
  enableSEC();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section >
  <par-div >
    <label for="auth">
      Author<span>*</span><i ></i>
      <par-sep >Enter Author's Name</par-sep>
    </label>
  </par-div>
  <par-div >
    <par-sep id="dynamic-field-1" >
      <input
        
        placeholder="Author"
        type="text"
        id="field"
        name="field[]">
    </par-sep>
    <button type="button" id="add-button" >Add More</button>
    <button
      type="button"
      id="remove-button"
      
      disabled="disabled">Remove Last</button>
  </par-div>
</section>