create a new id for each clone-CodePudding

I am trying to clone a div in a form while also giving each input a unique id. I have reproduced quite a bit of code but it's for a wholistic understanding of what I am trying to create.

Below is my html for the code:

  <div class="form-step">
  <div id="readroot">
    <div class="checkbox">
      <label for="LegalEntity">Legal Entity</label>
      <input type="radio" name="choice2" id="legalEntity2" value="legalEntity" onclick="filterForm2()" />
      <label for="Individual">Individual</label>
      <input type="radio" name="choice2" id="Individual2" value="Individual" onclick="filterForm2()" />
    </div>
    <div id="lec2" class="legal-entity-content">
      <div class="input-group">
        <label for="CompanyName">Company Name</label>
        <input type="text" name="CompanyName" id="CompanyName" placeholder="Ex. MyPocketCounsel" />
      </div>
      <div class="input-group">
        <label for="RegisteredAddress">Registered Address</label>
        <input type="text" name="RegisteredAddress" id="RegisteredAddress" placeholder="Ex. MyPocketCounsel" />
      </div>
      <div class="input-group">
        <label for="RegistrationNumber">Registration Number</label>
        <input type="text" name="RegistrationNumber" id="RegistrationNumber" placeholder="Ex. MyPocketCounsel" />
      </div>

      <div class="input-group">
        <label for="Definedas">Defined as...</label>
        <input type="text" name="Definedas" id="Definedas" placeholder="Ex. MyPocketCounsel" />
      </div>
    </div>
    <div id="ic2" class="individual-content hide">
      <div class="input-group">
        <label for="First Name">First Name</label>
        <input type="text" name="First Name" id="First Name" placeholder="Ex. MyPocketCounsel" />
      </div>
      <div class="input-group">
        <label for="Last Name">Last Name</label>
        <input type="text" name="Last Name" id="Last Name" placeholder="Ex. MyPocketCounsel" />
      </div>
      <div class="input-group">
        <label for="Address">Address</label>
        <input type="text" name="Address" id="Address" placeholder="Ex. MyPocketCounsel" />
      </div>
      <div class="input-group">
        <label for="Defined as">Defined as...</label>
        <input type="text" name="Defined as" id="Defined as" placeholder="Ex. MyPocketCounsel" />
      </div>
    </div>
    <input type="button" value="Remove Lender" class="btn btn-remove-lender"
    onclick="if (counter >= 1){
        counter --;
        this.parentNode.parentNode.removeChild(this.parentNode);
    }else{alert('you must have at least one Lender');}">
  </div>
  <span id="writeroot"></span>
    <div class="btns-group">
      <input type="button" id="morefields" value="Add Lender" class="btn btn-add-lender" onclick="moreFields()">

      <a href="#" class="btn btn-prev">Previous</a>
      <a href="#" class="btn btn-next">Next</a>
  </div>

Below is my javascript:

    const prevBtns = document.querySelectorAll(".btn-prev");
const nextBtns = document.querySelectorAll(".btn-next");
const progress = document.getElementById("progress");
const formSteps = document.querySelectorAll(".form-step");
const progressSteps = document.querySelectorAll(".progress-step");

let formStepsNum = 0;

nextBtns.forEach((btn) => {
  btn.addEventListener("click", () => {
    formStepsNum  ;
    updateFormSteps();
    updateProgressbar();
  });
});

prevBtns.forEach((btn) => {
  btn.addEventListener("click", () => {
    formStepsNum--;
    updateFormSteps();
    updateProgressbar();
  });
});

function updateFormSteps() {
  formSteps.forEach((formStep) => {
    formStep.classList.contains("form-step-active") &&
      formStep.classList.remove("form-step-active");
  });

  formSteps[formStepsNum].classList.add("form-step-active");
}

function updateProgressbar() {
  progressSteps.forEach((progressStep, idx) => {
    if (idx < formStepsNum   1) {
      progressStep.classList.add("progress-step-active");
    } else {
      progressStep.classList.remove("progress-step-active");
    }
  });

  const progressActive = document.querySelectorAll(".progress-step-active");

  progress.style.width =
    ((progressActive.length - 1) / (progressSteps.length - 1)) * 100   "%";
}

const IndividualContent = document.getElementById("ic");
IndividualContent.classList.add("hide");



function filterForm() {
 
  if(document.getElementById('legalEntity').checked) {
    //hide individual contnet
const IndividualContent = document.getElementById("ic");
IndividualContent.classList.add("hide");
const legalEntityContent = document.getElementById("lec");
legalEntityContent.classList.remove("hide");
console.log('AAA')
  }else  {
    const legalEntityContent = document.getElementById("lec");
    legalEntityContent.classList.add("hide");
    const IndividualContent = document.getElementById("ic");
IndividualContent.classList.remove("hide");

    console.log('BBB')
  }
}
function filterForm2() {
 
  if(document.getElementById('legalEntity2').checked) {
    //hide individual contnet
const IndividualContent = document.getElementById("ic2");
IndividualContent.classList.add("hide");
const legalEntityContent = document.getElementById("lec2");
legalEntityContent.classList.remove("hide");
console.log('YYY');
  }else  {
    const legalEntityContent = document.getElementById("lec2");
    legalEntityContent.classList.add("hide");
    const IndividualContent = document.getElementById("ic2");
IndividualContent.classList.remove("hide");

    console.log('NNN');
  }
  
   if(document.getElementById('legalEntity3').checked) {
    //hide individual contnet
const IndividualContent = document.getElementById("ic2");
IndividualContent.classList.add("hide");
const legalEntityContent = document.getElementById("lec2");
legalEntityContent.classList.remove("hide");
console.log('YYY');
  }else  {
    const legalEntityContent = document.getElementById("lec2");
    legalEntityContent.classList.add("hide");
    const IndividualContent = document.getElementById("ic2");
IndividualContent.classList.remove("hide");

    console.log('NNN');
  }
}

let counter = 0;
function moreFields() {
 
    counter   ;
    let newFields = document.getElementById('readroot').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    let newField = newFields.childNodes;
    for (let i=0;i<newField.length;i  ) {
        let theName = newField[i].name;
        if (theName)
            newField[i].name = theName   counter;
    }
    let insertHere = document.getElementById('writeroot');
    insertHere.parentNode.insertBefore(newFields,insertHere);
  console.log('is not'  counter);
  console.log("more fields worked");
}


function showContent() {
  var temp = document.getElementsByTagName("template")[0];
  var clon = temp.content.cloneNode(true);
  document.body.appendChild(clon);
}

function updateSymbol(e){
  var selected = $(".currency-selector option:selected");
  $(".currency-symbol").text(selected.data("symbol"))
  $(".currency-amount").prop("placeholder", selected.data("placeholder"))
  $('.currency-addon-fixed').text(selected.text())
}

$(".currency-selector").on("change", updateSymbol)

updateSymbol()

Is there a way to clone the div with id 'readroot' while changing the id of the two radio inputs to legalEntity3 and Individual3.

Sorry I am new to this any help will be appreciated

CodePudding user response：

You have a lot of duplicated code here, so as an aside I'd definitely suggest checking out AlpineJs or VueJs to help you. It's a different way of working but much simpler to achieve the same and more complex interactivity.

To answer your question though. I'd probably go down the route of having the html you want to duplicate inside a <template> tag. Here's a simplified example:

Html

You can see in the snippet below that I've added some placeholders {i} that could easily be whatever you want e.g. %%placeholder%% {replace} ::replace::

Javascript

Now in the javascript we can clone the template content, add it to a temporary div, replace the placeholders in the divs innerHtml and append the div to the output:

let counter = 0;
let template = document.getElementById('source');
let output = document.getElementById('output');

function moreFields() {
  counter  ;

  let div = document.createElement('div');

  div.appendChild(
    template.content.cloneNode(true)
  );

  div.innerHTML = div.innerHTML.replaceAll('{i}', counter);

  output.append(div);
}

for (i = 0; i < 3; i  ) {
  moreFields();
}

<template id="source">
  <div class="checkbox">
    <label for="legalEntity{i}">Legal Entity</label>
    <input type="radio" name="choice{i}" id="legalEntity{i}" value="legalEntity{i}" onclick="filterForm({i})" />
    <label for="individual{i}">Individual</label>
    <input type="radio" name="choice{i}" id="individual{i}" value="individual{i}" onclick="filterForm({i})" />
  </div>
</template>

<div id="output">

</div>

As a comparison here's the same thing implemented using AlpineJs:

<script src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

<div x-data="{
  filter(num) {
    console.log(num)
  }
}">
  <template x-for="i in 10">
    <div :key="i" class="checkbox">
        <label>
          Legal Entity
          <input type="radio" :name="'choice'   i" :value="'legalEntity'   i" @click="filter(i)" />
        </label>
      
        <label>
           Individual
          <input type="radio" :name="'choice'   i" :value="'individual'   i" @click="filter(i)" />
        </label>
      </div>
  </template>
</div>