javascript - How can I clone a form and change the id of its inputs for 2,3 times?

Question

I've been trying to clone an element of a form and change the id of its children. The thing I've not achieved is to clone the element for 3 or 4 times and the inputs of each clone need to have different id's, so I can work with the form. It would be great if you could help me with some code, because I'm just beginning with JQUERY and Javascript! Thanks a lot in advance!

HTML

          <div class="input-form fcf-form-group">

            <div class="form only">
              <h3 class="fcf-h3">Room</h3>
              <div class="form-section">

                <div class="title-group">
                  <label for="zimmer" class="fcf-label">Room</label>
                  <select name="zimmer" id="zimmer" required>
                    <option value="double">Double</option>
                    <option value="single">Single</option>
                  </select>
                </div>
              </div>
            </div>

            <div class="form neighbour">

              <div class="title-group small">
                <label for="erwachsene" class="fcf-label">Adults</label>
                <input type="number" id="erwachsene" name="erwachsene" min="1" max="5">
              </div>

              <div class="title-group small">
                <label for="kinder" class="fcf-label">Children</label>
                <input type="number" id="kinder" name="kinder" min="1" max="5">
              </div>

              <div class="title-group small">
                <label for="alter" class="fcf-label">Age of the Child</label>
                <select name="alter" id="alter" required>
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                </select>
              </div>
            </div>
          </div>
        </div>



        <div class="fcf-form-group">
            <button class="clone-button">zimmer</button>
        </div>

question from:https://stackoverflow.com/questions/65927717/how-can-i-clone-a-form-and-change-the-id-of-its-inputs-for-2-3-times

Answer 1

Consider the following.

$(function() {
  $("button.clone-button").click(function() {
    var clForm = $(".input-form:eq(0)").clone();
    var c = $(".input-form").length;
    $(".fcf-h3", clForm).html("Room " + c);
    var cur, tar;
    $("label, input, select", clForm).each(function(i, el) {
      if ($(el).is("label")) {
        cur = $(el).attr("for");
        if (cur.indexOf("-") > -1) {
          tar = cur.substr(0, cur.length - 2) + "-" + c;
        } else {
          tar = cur + "-" + c;
        }
        $(el).attr("for", tar);
      } else {
        cur = $(el).attr("id");
        if (cur.indexOf("-") > -1) {
          tar = cur.substr(0, cur.length - 2) + "-" + c;
        } else {
          tar = cur + "-" + c;
        }
        $(el).attr("id", tar);
      }
    });
    $(this).parent().before(clForm);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-form fcf-form-group">
  <div class="form only">
    <h3 class="fcf-h3">Room</h3>
    <div class="form-section">
      <div class="title-group">
        <label for="zimmer" class="fcf-label">Room</label>
        <select name="zimmer" id="zimmer" required>
          <option value="double">Double</option>
          <option value="single">Single</option>
        </select>
      </div>
    </div>
  </div>
  <div class="form neighbour">
    <div class="title-group small">
      <label for="erwachsene" class="fcf-label">Adults</label>
      <input type="number" id="erwachsene" name="erwachsene" min="1" max="5">
    </div>
    <div class="title-group small">
      <label for="kinder" class="fcf-label">Children</label>
      <input type="number" id="kinder" name="kinder" min="1" max="5">
    </div>
    <div class="title-group small">
      <label for="alter" class="fcf-label">Age of the Child</label>
      <select name="alter" id="alter" required>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </div>
  </div>
</div>
<div class="fcf-form-group">
  <button class="clone-button">zimmer</button>
</div>