Php loop with 1 show and hide in div function

Question

I'm kinda new to this and i also apologize if i made it unclear what i am trying to do.

In my database i have 2 images and info about leg armor wich if i click on the corrosponding div shows a overlay:

    <div class="legs">
       <a id="legs" onclick="legShow();"></a>
    </div>

    <div id="LegItems" >

<?php
$sqlleg = "SELECT * FROM items
WHERE part = 'legs'";
$legquery = mysqli_query($con, $sqlleg) or die (mysqli_error($con));

$rowleg = mysqli_fetch_row($legquery);


while($legf = mysqli_fetch_assoc($legquery))
{
?>
    <img id="legArmor" src="<?php echo $legf['image']; ?>" onclick="legHide()"/>
<?php
}
?>

And the functions:

    <script>

function legShow() {
                var LegItems = document.getElementById('LegItems');
                LegItems.style.display = 'block';
                LegItems.style.z-index = 400;
}

function legHide() {
                var legs = document.getElementById("legs");
                var LegItems = document.getElementById('LegItems');
                LegItems.style.display = 'none';
                legs.innerHTML = "<img src='<?php echo $legf['image']; ?>' width=80; height=120;>"

}


</script>

Problems are: When i click on the leg div the overlay does open but i only see 1 image instead of 2. (only the last one)

Second problem is that the leg div is a empty square that if clicked opens the overlay with the leg pictures. I want the leg picture that i click to fill the empty square.

I apologize again if its not clear. (I'm dutch :D)

Answer 1

try commenting this line

$rowleg = mysqli_fetch_row($legquery);

this line moves the pointer to next row which results only the last image to be shown. I didn't quite get what you mean in your second problem. Also use id's only once. if you need to use multiple you can always use legArmor[0],legArmor[1] etc