0

I am printing out data from my Database. For every row in the DB a new container with that information is printed. Each container contains a button that executes a read-more/read-less function.

My problem is: The buttons on the 2nd/3rd/4th container are altering the text of the 1st container and not their own. Is it possible for me to have each button only alter it's own containers text.

'''

                    $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;
    }
    }
cs_12345
  • 5
  • 1
  • Does this answer your question? [Getting the value of the input field using jquery](https://stackoverflow.com/questions/59887834/getting-the-value-of-the-input-field-using-jquery) – Taplar Mar 03 '20 at 16:50
  • Don't repeat ids. Use classes, with contextual lookups. The duplicate convers this as an answer. – Taplar Mar 03 '20 at 16:51
  • Hi Taplar, I think this will help thank you. I get the concept and I will try to apply. – cs_12345 Mar 03 '20 at 17:10

1 Answers1

0

Try to include an id to each item

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

and pass the id to the javascript function

function read(id) {...
WILLIAM DAZA
  • 118
  • 1
  • 7
  • Rating ID is the unique identifier of each record. When passing the id to the javascript function - should it be 'function read(RatingID) {...' or - function read(".$row[RatingID].") {...? Also. will 'getElementById("more")' now be getElementById("more-". $row['RatingID]") ? – cs_12345 Mar 03 '20 at 18:10
  • if you pass the id to the javascript function you can already take it directly from the function function read (id) { document.getElementById ("more-" + id); } – WILLIAM DAZA Mar 03 '20 at 19:22