Adding a unique id to appended forms in Jquery or Javascript-CodePudding

I have a range input to reveal the number of questions the user wants. After they changed the range input's value, the user presses the submit button. Then a form is appended. Everything is good from here. But now I want the appended forms to have different IDs, for example, the first form to have the id "form1", the second form to have the id "form2", etc. I can't find a way to give each of the appended form different ids.

HTML

<form style="margin-left: 5px;">
        <div id="marginOnTheLeft">
       <label for="questions1">How Many Questions?</label>
      <input type="range" id="questions1" name="questions1" min="5" max="20"><br>
            Value:<p id="value1"></p>
        <p><a style="color: #0C56B3" id="more">More...  </a><i id="ex" class="fa fa-exclamation-circle info" data-toggle="tooltip" data-placement="right" title="Need more Questions, click more!" height="16px"></i></p>
       <label for="questions2" class="hiddenRange">How Many Questions?</label>
      <input type="range" id="questions2" class="hiddenRange" name="questions2" min="21" max="30" disabled><i id="ex" class="fa fa-exclamation-circle info hiddenRange" data-toggle="tooltip" data-placement="right" title="For Pro users." height="16px"></i><br>
          <span class="hiddenRange">Value:<p id="value2" class="hiddenRange"></p></span>
      <label for="questions3" class="hiddenRange">How Many Questions?</label>
      <input type="range" id="questions3" class="hiddenRange" name="questions3" min="31" max="100" disabled><i id="ex" class="fa fa-exclamation-circle info hiddenRange" data-toggle="tooltip" data-placement="right" title="For Premium users." height="16px"></i><br>
          <span class="hiddenRange">Value:<p id="value3" class="hiddenRange"></p></span>
          <button id="genBtn" type="button" class="btn btn-dark">Generate</button><br><br>
            <div class="addedQuestions"><br></div>
            <button type="button" id="preview" class="btn btn-primary">Preview</button>
          </div>
      </form>

Jquery(From the appended part)

 $(document).ready(function() {
                  $('#genBtn').on('click', function() {
                  
                    // check if the entered value is a number, else we won't execute the for-loop
                    var xds = parseInt($("#questions1").val());
                    if (!isNaN(xds)) {
                      //if we want to reset content of .addedQuestions div we need the below line
                      $('.addedQuestions').html('');

                      // generate span.dashes-x and append them
                      for (var i = 0; i < xds; i  ) {
                       
                          
                        var $newTile = '<form class="append"><p id="qNumber"></p><div class="col-auto my-1"><label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label><select class="custom-select mr-sm-2" id="inlineFormCustomSelect"><option selected>How Many Questions...</option><option value="1" name="1">1</option><option value="2" name="2">2</option><option value="3" name="3">3</option><option value="4" name="4">4</option><option value="5" name="five">5</option></select> </div><span class="dashed-x" style="display: block"><input type="text" class="questionInput" placeholder="Write Your Question"><br><br><input type="radio" name="options"><input type="text" placeholder=" Option 1" class="optionInput"><br><input type="radio" name="options"><input type="text" placeholder=" Option 2" class="optionInput"><br><input type="radio" name="options"><input type="text" placeholder=" Option 3" class="optionInput"><br><input type="radio" name="options"><input type="text" placeholder=" Option 4" class="optionInput"><br><input type="radio" name="options"><input type="text" placeholder=" Option 5" class="optionInput"></span></form><br><br><br><br><br><br><br><br><br>';
                        $('.addedQuestions').append($newTile);
                      }
                    }
                  });
                     
                });

How could I give each of the appended forms a unique id, preferable with the form number behind, like the first form's id to be "form1", etc.

CodePudding user response：

$(document).ready(function() {
             
                  $('#genBtn').on('click', function() {
                   var formId=0;
                    // check if the entered value is a number, else we won't execute the for-loop
                    var xds = parseInt($("#questions1").val());
                    if (!isNaN(xds)) {
                      //if we want to reset content of .addedQuestions div we need the below line
                      $('.addedQuestions').html('');

                      // generate span.dashes-x and append them
                      for (var i = 0; i < xds; i  ) {
                         formId;
                          
                        var $newTile ='<h6>Form Id ' formId '</h6>' '<form class="append" id=' formId '><p id="qNumber"></p><div class="col-auto my-1"><label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label><select class="custom-select mr-sm-2" id="inlineFormCustomSelect"><option selected>How Many Questions...</option><option value="1" name="1">1</option><option value="2" name="2">2</option><option value="3" name="3">3</option><option value="4" name="4">4</option><option value="5" name="five">5</option></select> </div><span class="dashed-x" style="display: block"><input type="text" class="questionInput" placeholder="Write Your Question"><br><br><input type="radio" name="options"><input type="text" placeholder=" Option 1" class="optionInput"><br><input type="radio" name="options"><input type="text" placeholder=" Option 2" class="optionInput"><br><input type="radio" name="options"><input type="text" placeholder=" Option 3" class="optionInput"><br><input type="radio" name="options"><input type="text" placeholder=" Option 4" class="optionInput"><br><input type="radio" name="options"><input type="text" placeholder=" Option 5" class="optionInput"></span></form><br><br><br><br><br><br><br><br><br>';
                        $('.addedQuestions').append($newTile);
                      }
                    }
                  });
                     
                });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form style="margin-left: 5px;">
        <div id="marginOnTheLeft">
       <label for="questions1">How Many Questions?</label>
      <input type="range" id="questions1" name="questions1" min="5" max="20"><br>
            Value:<p id="value1"></p>
        <p><a style="color: #0C56B3" id="more">More...  </a><i id="ex" class="fa fa-exclamation-circle info" data-toggle="tooltip" data-placement="right" title="Need more Questions, click more!" height="16px"></i></p>
       <label for="questions2" class="hiddenRange">How Many Questions?</label>
      <input type="range" id="questions2" class="hiddenRange" name="questions2" min="21" max="30" disabled><i id="ex" class="fa fa-exclamation-circle info hiddenRange" data-toggle="tooltip" data-placement="right" title="For Pro users." height="16px"></i><br>
          <span class="hiddenRange">Value:<p id="value2" class="hiddenRange"></p></span>
      <label for="questions3" class="hiddenRange">How Many Questions?</label>
      <input type="range" id="questions3" class="hiddenRange" name="questions3" min="31" max="100" disabled><i id="ex" class="fa fa-exclamation-circle info hiddenRange" data-toggle="tooltip" data-placement="right" title="For Premium users." height="16px"></i><br>
          <span class="hiddenRange">Value:<p id="value3" class="hiddenRange"></p></span>
          <button id="genBtn" type="button" class="btn btn-dark">Generate</button><br><br>
            <div class="addedQuestions"><br></div>
            <button type="button" id="preview" class="btn btn-primary">Preview</button>
          </div>
      </form>

Here is a sample of how to add form Id. I have created a variable which would increment on every loop iteration and gets reset on click of generate button. You could also reset form-id after some event. I hope this answers your question.