我想在输入字段中显示用户以前输入的数据，以便用户可以修改它，添加更多的部分并删除它们，所以我在while循环中使用fetch_assoc（）函数从数据库中获取数据，其中包含div。我尝试在while循环的最后一次迭代后使用Add按钮追加更多的部分，并使用remove按钮删除最后追加的部分，但如果数据库中有两行或更多行，则Add按钮仅追加在第一个部分之后，而remove按钮删除第一个部分。

HTML

<script> var r=0;</script>
    <h2>Music</h2>
    <?php
        $query = "SELECT mu.id, alb.album, alb.song 
                  FROM music AS mu
                  INNER JOIN albums AS alb ON mu.id = alb.music_id
                  WHERE alb.music_id = '{$_SESSION['idmu']}';";
        $result = $mysqli->query($query);
        
        while ($row=$result->fetch_assoc()) {
    ?>
    <div id="container">
        <div id="mainsection">
    
        <h3>Album</h3>
        <input type="text" name="album[]" id="album" value="<?php echo $row['album'];?>">
        <br>
        <h3>Song</h3>
        <input type="text" name="song[]" id="song" value="<?php echo $row['song'];?>">
        <script> r++;</script> 
        <br><br>
        
        </div>
    </div>
    <?php
        }
    ?>
    
    <button type="button" id="addbtn">Add</button>
    <button type="button" id="removebtn">Remove</button>

    <script>
        addbtn.addEventListener("click", function(e) {
        var container = document.getElementById("container");
        var section = document.getElementById("mainsection");   
        container.appendChild(section.cloneNode(true));
        r++;
        });

        removebtn.addEventListener("click", function(e) {
        var section = document.getElementById("mainsection");
        if(r > 1) {
        r--; 
        var sec=document.getElementById("mainsection"); 
        var parentDiv = sec.parentNode; 
        parentDiv.removeChild(parentDiv.lastElementChild); 
        }
        else { //so it doesn't remove the section if there's only 1
        }
        });  
    </script>

在while循环中尝试appendChild，但它只创建重复项。还添加了一个变量“r”，这样我就可以防止它删除第一节，如果这是唯一剩下的。我只尝试使用纯JS，但jQuery也很好。