How to display text when a (multiple)checkbox is checked?

This is the snippet in my index:

                    <p id="text" style="display:none">hello</p>

 echo '<tr>';
                       echo '<td>'.$s['school_name'].'</td>'; 
                       echo '<td>'.$s['location'].'</td>';
                       echo '<td>'.$s['population'].'</td>';
                       echo '<td>'.$s['cost'].'</td>';
                       echo '<td>'.$s['topnotchers'].'</td>';
                       echo '<td>'.$s['rating'].'</td>';
                       echo '<td><input type="checkbox" name="userSelection" name="userSelection" onclick="userSelection()" value="'.$s['school_id'].'"</td>';

                   echo '</tr>';
                   }

And here is my js:

function userSelection(){

 var checkBox = document.getElementsByName("userSelection")[0];
    var text = document.getElementById("text");
    if (checkBox.checked == true){
        text.style.display = "block";
    } else {
       text.style.display = "none";
    }

}

The text only displays when I check on row[0] since I set it to row[0]. But, what should be done if I need the function to be true to all rows when I check it? The above code only displays text on first loop. Is "*" going to work? I'm a beginner, a help would be appreciated.