How to duplicate or clone a DIV in Java Script and read all elements in ASP.NET C#

Question

Hello,

I have a guest form that I need to automatically increase the fields according to the completion.

The code is:

<div class="form-row" id="Guests">
<p><strong>Guests Forms</strong></p>
<div id="guest1">

    <div class="form-group col-md-3">
        <label for="labelGuestNumber" class="col-sm-1 col-form-label">1.</label>
        <label for="labelGuesName1" class="col-sm-2 col-form-label">Name: </label>
        <div class="col-sm-8" style="margin-left: 5px;">
            <input runat="server" class="form-control" id="inputGuestName1" placeholder="Guest Name" required>
        </div>
    </div>
    <div class="form-group col-md-4" style="margin-left: -40px;">
        <label for="labelCPFCNPJGuest1" class="col-sm-3 col-form-label" >CPF/CNPJ:</label>
        <div class="col-sm-7">
            <input runat="server" class="form-control" id="inputCPFCNPJGuest1" placeholder="CPF / CNPJ" onChange="newGuest()" required>
        </div>
    </div>
</div>

That is, every time you fill out the CPF/CNPJ you can open one more line to fill in another guest. When you submit this form, I need it read in ASP.NET C# to be entered into the database.

I have no idea how to fix.

Answer 1

Good a solution to the problem.

    function newGuest() {
  let clone = $("#guest1").clone();
  let count = $("#Guests [id^=guest]").length;
  clone.attr("id", "guest" + (count + 1));
  clone.find("label[for='labelGuestNumber']").html((count + 1) + ":");
  clone.find("label[for='labelGuesName1']").attr("for", "labelGuesName" + (count + 1));
  clone.find("#inputGuestName1").val("");
  clone.find("#inputGuestName1").attr("id", "inputGuestName" + (count + 1));
  clone.find("label[for='labelCPFCNPJGuest1']").attr("for", "labelCPFCNPJGuest" + (count + 1));
  clone.find("#inputCPFCNPJGuest1").val("");
  clone.find("#inputCPFCNPJGuest1").attr("id", "inputCPFCNPJGuest" + (count + 1));
  $("#Guests").append(clone);
}