如何使用循环打印按钮，并让它在每次打印时执行不同的功能

Question

我正在打印数据库中的数据。对于DB中的每一行，都会打印一个包含该信息的新容器。每个容器都包含一个按钮，用于执行多读/少读功能。

我的问题是：第2/3/4个容器上的按钮正在更改第一个容器的文本，而不是它们自己的文本。我是否可以让每个按钮只更改它自己的容器文本。

''

$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>

JAVASCRIPT

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) {...