Can't show another checkbox by clicking a checkbox dynamically & individually

So basically, I have a first checkbox with a list of several schemas.

Want I want to do is simple :

When I check a schema, I want to make appear his individual div "list-right" right bellow, wich is ANOTHER checkbox.

Here is my code :

<div>

    <div>

        <h4>Select your schema(s) :</h4>
        <div id="list-schemas">
            <?php
                foreach ($schemas as $elt) {
                    echo '<input type="checkbox" name="schemas[]" value="' . $elt->getSchema() . '"/>' . $elt->getSchema() . '<br />';
                }
            ?>
        </div>

    </div>

    <h4>Privileges on tables by selected schemas :</h4>
    <div id="div-privileges">

        <?php
            foreach ($schemas as $elt) {
                echo '<div class="list-right" id="' . $elt->getSchema() . '">';

                    echo '<label for="list-right">' . $elt->getSchema() . ' :</label><br />';
                    echo '<input type="checkbox" name="privileges[' . $elt->getSchema() . '][]" value="REVOKE"/> REVOKE ? <br />';
                    echo '<input type="checkbox" name="privileges[' . $elt->getSchema() . '][]" value="ALL"/> ALL PRIVILEGES ? <br />';
                    echo '<hr>';
                    echo '<input type="checkbox" name="privileges[' . $elt->getSchema() . '][]" value="SELECT"/> SELECT ? <br />';
                    echo '<input type="checkbox" name="privileges[' . $elt->getSchema() . '][]" value="INSERT"/> INSERT ? <br />';
                    echo '<input type="checkbox" name="privileges[' . $elt->getSchema() . '][]" value="UPDATE"/> UPDATE ? <br />';
                    echo '<input type="checkbox" name="privileges[' . $elt->getSchema() . '][]" value="DELETE"/> DELETE ? <br />';
                    echo '<hr>';
                    echo '<input type="checkbox" name="privileges[' . $elt->getSchema() . '][]" value="CREATE"/>CREATE ? <br />';

                echo '</div>';
            }
        ?>

    </div>

</div>

I managed to display = 'none' ALL THE div "list-right".

As you can see :

var listRight=document.getElementsByClassName("list-right");

for (var i = 0; i < listRight.length; i ++) {
    listRight[i].style.display = 'none';
}

What I have without the Javascript function : https://image.noelshack.com/fichiers/2019/38/3/1568790896-capture2.png

What I have with the Javascript function : https://image.noelshack.com/fichiers/2019/38/3/1568790893-capture.png

What I want : https://image.noelshack.com/fichiers/2019/38/3/1568790898-capture3.png

But I can't make them appear individually, & dynamically...

Can anybody help me..?