I have this HTML form and JavaScript to add a dinamic form input when I click the + button, how can I give an individual name to each input field? name=”name1″ name=”email1″, name=”name2″ name=”email2″, name=”name3″ name=”email3″ and so on…

<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>

I have tried an auto increment funtion but I cannot make it work