如何在 HTML 动态“+”表单输入中自动递增名称值

Question

我有这个 HTML 表单和 JavaScript，可以在单击 + 按钮时添加动态表单输入，如何为每个输入字段指定单独的名称？名称=“名称1”名称=“电子邮件1”，名称=“名称2”名称=“电子邮件2”，名称=“名称3”名称=“电子邮件3”等等...

<div class="row justify-content-center">
        <div class="col-xl-8">
          <div class="contact-form__inner">
            <form action="form/register.php" method="post">
              <div class="input-group">
                <div class="input-single">
                  <label for="contactFirstName">Team Name</label>
                  <input type="text" name="contact-name" id="contactFirstName" required
                    placeholder="Enter your team name">
                </div>
                <div class="input-single">
                  <label for="contactEmail">Email</label>
                  <input type="email" name="contact-email" id="contactEmail" required placeholder="Enter your email">
                </div>
              </div>
              <div class="input-group">
                <div class="input-single">
                  <label for="contactEmail">Player Name</label>
                  
                </div>
                <div class="input-single">
                  <label for="contactPhone">Player Email</label>
                  
                </div>
              </div>
              <div class="input-group m-3">                            
                            <input type="text" name="name1" class="form-control m-input" placeholder="Player name">
                            <input type="text" name="email1" class="form-control m-input" placeholder="Player email">
                            <div class="input-group-prepend">
                                <button class="btn btn-danger"
                                        id="DeleteRow"
                                        type="button">
                                    <i class="bi bi-trash"></i>
                                    Delete
                                </button>
                            </div>
                        </div>
              <div id="newinput"></div>
                    <button id="rowAdder" type="button" class="btn btn-dark">
                        <span class="bi bi-plus-square-dotted">
                        </span> ADD
              </button>              
              <div class="section__cta">
                <input type="text" class="d-none" name="form-anti-honeypot" value="">
                <button type="submit" class="cmn-button">Send Message</button>
              </div>
            </form>            
    </div>
    <script type="text/javascript">
        $("#rowAdder").click(function () {
            newRowAdd =
                '<div id="row"> <div class="input-group m-3">' +
                '<input type="text"  name="name2" class="form-control m-input" placeholder="Player name"><input type="text"  name="email2" class="form-control m-input" placeholder="Player email">' +
                '<div class="input-group-prepend">' +
                '<button class="btn btn-danger" id="DeleteRow" type="button">' +
                '<i class="bi bi-trash"></i> Delete</button> </div></div> </div>' ;
                
 
            $('#newinput').append(newRowAdd);
        });
        $("body").on("click", "#DeleteRow", function () {
            $(this).parents("#row").remove();
        })
    </script>
          </div>
        </div>

我尝试过自动递增功能，但无法使其工作

Answer 1

如果您不介意编号中的间隙（即，如果您有

name1

、

name2

和

name3

，然后删除第二行），您可以保留一个计数器并在每次单击

 时递增它adder

按钮

<script type="text/javascript">
  let rowCounter = 1;
  $("#rowAdder").click(function () {
    rowCounter++;
    newRowAdd =
      `<div id="row"> <div class="input-group m-3">` +
      `<input type="text"  name="name${rowCounter}" class="form-control m-input" placeholder="Player name"><input type="text"  name="email${rowCounter}" class="form-control m-input" placeholder="Player email">` +
      `<div class="input-group-prepend">` +
      `<button class="btn btn-danger" id="DeleteRow" type="button">` +
      `<i class="bi bi-trash"></i> Delete</button> </div></div> </div>` ;
      
    $('#newinput').append(newRowAdd);
  });
  
  $("body").on("click", "#DeleteRow", function () {
     $(this).parents("#row").remove();
  })
</script>