如何使用循環打印按鈕並讓它在每次打印時執行不同的功能？

Question

我正在從我的數據庫中打印數據。 對於數據庫中的每一行，都會打印一個包含該信息的新容器。 每個容器都包含一個執行多讀/少讀功能的按鈕。

我的問題是：第二/第三/第四個容器上的按鈕正在改變第一個容器的文本而不是它們自己的文本。 我是否可以讓每個按鈕只改變它自己的容器文本。

'''

                    $sqls = "SELECT * FROM module_rating WHERE username='$name'";
                    $results = mysqli_query($conn, $sqls);
                    $queryResultss = mysqli_num_rows($results);
                    if ($queryResultss > 0) {
                        while ($row = mysqli_fetch_assoc($results)) {

                            echo "
                            <div class='wrapper'>

                            <div class='profileinfo'>

                             <h3>Module ".$row['Mod_Name']." </h3>
                            <h4> ".$row['Mod_Code']."</h4>
                            <h4> Your Rating </h4>
                            <p><b>Overall:</b> ".$row['Overall_rating']." Stars </p>
                            <p><b>Overall Comment:</b></br>
                            ".$row['Overall_comment']." </p>

                                <span id='dots'>...</span><span id='more'> <i class='fa fa-angle-right'></i>
                                <p>Workload: ".$row['Workload_rating']." Stars </p>
                            <p>Workload Comment: </p>
                                </span>

                            <button type='button' id='read' onclick='read()'> More</button>

爪哇腳本

    var i=1;
    function read() {

    if(!i){
    document.getElementById("more").style.display ="inline";

    document.getElementById("dots").style.display ="none";

    document.getElementById("read").innerHTML="Read Less";
    i=1;
    }
    else {
    document.getElementById("more").style.display ="none";

    document.getElementById("dots").style.display ="inline";

    document.getElementById("read").innerHTML="Read More";
    i=0;
    }
    }

Answer 1

嘗試為每個項目包含一個 id

<span id='dots-". $row['id'] ."' >
<span id='more-". $row['id'] ."' >
<span id='read-". $row['id'] ."' >   

<button type='button' id='read' onclick='read(".$row['id'].")'> More</button>

並將 id 傳遞給 javascript 函數

function read(id) {...