生成具有唯一id、名称或类的特定div？使用PHP/Javascript

下面的代码显示了单击按钮add部分时要生成的div。我想为每个部分生成唯一的数据，这样它就不会完全复制它，否则会弄乱数据

surveycontent.php

<div id='sform' class='tab-pane fade'>
           <br />
           <div class='col-md-12' id='clone-parent'>

               <!-- it is the following portion of HTML that is to be replicated? -->

               <div class='col-md-10 clone-section'><!-- removed ID, added new class -->
                   <div class='panel-group'>
                       <div class='panel panel-default'>
                           <div class='panel-heading'>Section 1</div><!-- this needs to change progammatically or via CSS-->
                           <div class='panel-body'>


        <b>Number of Questions: </b>


                <span id="ctr_num"> <input id="q_num" class="form-control" style="width:50px;" name="q_num" size="2" placeholder="#"/></span>
                <br>
                 <b>Select Category</b>

                <select class="form-control" style="width: 150px;" id="categorydd" name="catdd" onChange="change_category()">

                    <option>-Please Select One-</option>

                    <?php
                    $query=mysqli_query($con, "SELECT category_id, categoryname FROM category WHERE ParentCategoryID IS NULL");
                    while($row=mysqli_fetch_array($query)) {
                        ?>
                        <option value="<?php echo $row["category_id"]; ?>"><?php echo $row["categoryname"]; ?></option>

                        <?php
                    }
                    ?>

                </select><br>
                               <b>Select Subcategory</b>
                               <div id='subcategory'>

                    <select class="form-control" style="width: 150px;">

                        <option>-Please Select One-</option>
                    </select>
                                   <br />
                               </div>
                               <p hidden>Select Questions</p>
                               <br />
                               <div id='question'></div><!-- assigned as a class rather than id - can be targeted using querySelectorAll etc -->
                               <br />
                           </div>
                       </div>
                   </div>
               </div>
           </div>
       </div>

    <hr>


   <div class="col-md-2">
   <input type="submit" name="addsection" class="btn btn-default" value="Add Section" id="addsection" />

   </div>

    <div id='sform' class='tab-pane fade'>
           <br />
           <div class='col-md-12' id='clone-parent'>

               <!-- it is the following portion of HTML that is to be replicated? -->

               <div class='col-md-10 clone-section'><!-- removed ID, added new class -->
                   <div class='panel-group'>
                       <div class='panel panel-default'>
                           <div class='panel-heading'>Section 1</div><!-- this needs to change progammatically or via CSS-->
                           <div class='panel-body'>


        <b>Number of Questions: </b>


                <span id="ctr_num"> <input id="q_num" class="form-control" style="width:50px;" name="q_num" size="2" placeholder="#"/></span>
                <br>
                 <b>Select Category</b>

                <select class="form-control" style="width: 150px;" id="categorydd" name="catdd" onChange="change_category()">

                    <option>-Please Select One-</option>

                    <?php
                    $query=mysqli_query($con, "SELECT category_id, categoryname FROM category WHERE ParentCategoryID IS NULL");
                    while($row=mysqli_fetch_array($query)) {
                        ?>
                        <option value="<?php echo $row["category_id"]; ?>"><?php echo $row["categoryname"]; ?></option>

                        <?php
                    }
                    ?>

                </select><br>
                               <b>Select Subcategory</b>
                               <div id='subcategory'>

                    <select class="form-control" style="width: 150px;">

                        <option>-Please Select One-</option>
                    </select>
                                   <br />
                               </div>
                               <p hidden>Select Questions</p>
                               <br />
                               <div id='question'></div><!-- assigned as a class rather than id - can be targeted using querySelectorAll etc -->
                               <br />
                           </div>
                       </div>
                   </div>
               </div>
           </div>
       </div>

    <hr>


   <div class="col-md-2">
   <input type="submit" name="addsection" class="btn btn-default" value="Add Section" id="addsection" />

   </div>
   </div>

    <br>

<div class="col-md-12">
    <div class=col-md-1><input type="submit" name="submit" id="btnSaveSurvey" class="btn btn-success" value="Submit" /></div>


                <div class=col-md-1><input type="button" class="btn btn-danger" value="Reset Survey" /> </div>
</div>




</body>



</html>




<script type="text/javascript">

    function showUser(str,id) {
        if (str == "") {
            document.getElementById("txtHint").innerHTML = "";
            return;
        } else {
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    /* use id supplied */
                    document.getElementById(id).innerHTML = this.responseText;
                }
            };
            xmlhttp.open("GET","hay.php?q="+str,true);
            xmlhttp.send();
        }
    }

    function change_category()
    {
        var xmlhttp=new XMLHttpRequest();
        xmlhttp.open("GET","ajax.php?category="+document.getElementById("categorydd").value,false);
        xmlhttp.send(null);
        document.getElementById("subcategory").innerHTML=xmlhttp.responseText;


        if(document.getElementById("categorydd").value=="Select")
        {
        document.getElementById("question").innerHTML="<select><option>Select</option></select>";
        }

        //alert(document.getElementById("categorydd").value);
        var xmlhttp=new XMLHttpRequest();
        xmlhttp.open("GET","ajax.php?main=1&subcategory="+document.getElementById("categorydd").value +"&cnt="+document.getElementById("q_num").value,false);
        xmlhttp.send(null);
        document.getElementById("question").innerHTML=xmlhttp.responseText;
    }


    function load_questions(){

        var xmlhttp=new XMLHttpRequest();
        xmlhttp.open("GET","ajax.php??main=1&subcategory="+document.getElementById("subcategorydd").value +"&cnt="+document.getElementById("q_num").value,false);
        xmlhttp.send(null);
        document.getElementById("question").innerHTML=xmlhttp.responseText;


    }

    //subcat level
    function addQues()
    {
        var c = "insertQuesHere" + (parseInt(document.getElementById("q_num").value) + 1).toString();
        var xmlhttp=new XMLHttpRequest();
        xmlhttp.open("GET","ajax.php?main=0&addQues=yes&subcategory="+document.getElementById("subcategorydd").value+"&cnt="+document.getElementById("q_num").value,false);
        xmlhttp.send(null);
        //alert("insertQuesHere" + document.getElementById("q_num").value .toString());

        document.getElementById(c).innerHTML= xmlhttp.responseText;

        //alert("ajax.php?addQues=yes&subcategory="+document.getElementById("subcategorydd").value+"cnt="+document.getElementById("q_num").value);

        document.getElementById("q_num").value = parseInt(document.getElementById("q_num").value) + 1;

    }
    // category level
    function addQues_Cat()
    {

        var c = "insertQuesHere" + (parseInt(document.getElementById("q_num").value) + 1).toString();
        var xmlhttp=new XMLHttpRequest();
        xmlhttp.open("GET","ajax.php?main=1&addQues=yes&subcategory="+document.getElementById("categorydd").value+"&cnt="+document.getElementById("q_num").value,false);
        xmlhttp.send(null);
        //alert("insertQuesHere" + document.getElementById("q_num").value .toString());

        document.getElementById(c).innerHTML= xmlhttp.responseText;

        //alert("ajax.php?addQues=yes&subcategory="+document.getElementById("subcategorydd").value+"cnt="+document.getElementById("q_num").value);

        document.getElementById("q_num").value = parseInt(document.getElementById("q_num").value) + 1;


    }

    function checkValues()
    {

        var sameValue = false;
        var cnt = parseInt(document.getElementById("q_num").value);

        for (var i = 1; i <= cnt; i++)
        {
            var a = "question_dropdown"+i.toString();
            for (var j = 1; j <= cnt; j++)
            {
                var b = "question_dropdown"+j.toString();
                if(document.getElementById(a).value ==  document.getElementById(b).value && i != j)
                    sameValue = true;
            }
        }

        if(sameValue == true) {
            alert("No duplicate questions allowed.");
            return false;
        }
        else
            return true;
    }

    function delQues()
    {

        var a = "ques"+document.getElementById("q_num").value.toString();
        //alert(a);
        var element = document.getElementById(a);
        element.outerHTML = "";
        delete element;


        document.getElementById("q_num").value = (document.getElementById("q_num").value - 1);

    }


    $(document).ready(function(){
        $("#execute").click(function(){
            var numQ = +$('#q_num').val();
            //Loop--
            for(var ctr=0; ctr < numQ; ctr++){
                var str = load_questions();
                $("#divQuestions").append(str);
            }
        });
    });



</script>

第一节
问题数目：


选择类别
-请选择一个-
在JavaScript中，我使用这个方法

var getUniqueId = function () {
    return Math.random().toString(36).substr(2, 10);
};

生成的id示例
“t0917mk342”、“z6teqwb2v7”
等。
在文件中使用一个会话计数器变量来像这样唯一化您的div id

if(!isset($_SESSION['divcounter'])){
   $_SESSION['divcounter'] = 1;
}

然后在addques函数中使用这个会话变量，如下所示

$num = $cnt + $_SESSION['divcounter'];
$_SESSION['divcounter']++;

您已经从js传递了cnt，并将其与number count一起使用，以创建具有该计数的唯一id。那你有什么问题？因为您已经对每个id使用了{$num}。我希望在单击add section按钮时生成整个代码。就像创建这个while代码的另一部分一样@MahipalPatelWARNING：当使用
mysqli
时，您应该使用and将用户数据添加到查询中。不要使用字符串插值或串联来完成此操作，因为您已经创建了严重的错误。切勿将
$\u POST
、
$\u GET
或任何用户数据直接放入查询中，如果有人试图利用您的错误进行攻击，这可能是非常有害的。请尽量避免对要复制的元素使用ID，因为首先，它可能会导致重复，然后需要更正为唯一；其次，当您下次需要使用它们时，您不一定知道代码中的新ID。在我看来，一个更好的解决方案是使用父和子选择器（想想
document.querySelectorAll
）。您的ajax函数到处都是——大多数函数根本没有回调函数，有些函数有嵌套的ajax调用。在我的情况下，你应该看看承诺或承诺@Ankush jain在你的情况下，你两者都有。
$num = $cnt + $_SESSION['divcounter'];
$_SESSION['divcounter']++;