在Jquery或Javascript中向附加表单添加唯一id

我有一个范围输入来显示用户想要的问题数量。更改范围输入值后，用户按下提交按钮。然后附加一个表单。从这里开始一切都很好。但是现在我希望附加的表单具有不同的id，例如，第一个表单具有id“form1”，第二个表单具有id“form2”，等等。我找不到一种方法来为每个附加表单提供不同的id

HTML

有多少问题？


值：

更多

有多少问题？


值：

有多少问题？


值：

生成




预览

Jquery（来自附加部分）

$（文档）.ready（函数（）{
$（'#genBtn'）。在（'click'，function（）上{
//检查输入的值是否为数字，否则我们将不执行for循环
var xds=parseInt（$（“#问题1”）.val（）；
如果（！isNaN（xds））{
//如果我们想重置.addedQuestions div的内容，我们需要以下行
$（'.addedQuestions'）.html（''）；
//生成span.dashes-x并附加它们
对于（变量i=0；i

我怎样才能给每个附加表单一个唯一的id，最好在后面加上表单号，比如第一个表单的id是“form1”，等等。

$（文档）.ready（函数（）{
$（'#genBtn'）。在（'click'，function（）上{
var-formId=0；
//检查输入的值是否为数字，否则我们将不执行for循环
var xds=parseInt（$（“#问题1”）.val（）；
如果（！isNaN（xds））{
//如果我们想重置.addedQuestions div的内容，我们需要以下行
$（'.addedQuestions'）.html（''）；
//生成span.dashes-x并附加它们
对于（变量i=0；i首选项有多少个问题…12345


















<；
$（'.addedQuestions'）。追加（$newfile）；
}
}
});
});

有多少问题？


值：

更多

有多少问题？


值：

有多少问题？


值：

生成




预览
我觉得它缺少了一些东西，但是你可以试试
“有没有办法检查id是否存在，我知道我可以通过单击和填充来测试它，但是是否有一个内置函数。要检查id是否存在
如果（$（'#id'）.length）{//exists}或者{//not exists}
。。注意Id应该是唯一的[不要为一个以上的元素复制相同的Id]，在我看来它是有效的。但我明天会做更多的测试，但现在，它似乎起作用了，我试着点击，改变字体系列，宽度，html。Mohamed Yousef和anand shukla的答案都起作用了，其中一个在注释中，另一个是答案。我如何将类qNumber的值转换为问题编号？我假设在每次生成时，您都为每个问题创建表单，因此您可以用formId替换qNumber的值。这很好用。
<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>

 $(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);
                      }
                    }
                  });
                     
                });