On-click and local storage image change only affecting LAST IF case PHP

I have a foreach loop which lets me output each item of my grid (5 blocks). I have then an if statement for each potential block where if there is an entry in my SQL DB then show it, otherwise, show a blank square. This is working correctly. Within each 'block' I have an on-click which will change the image clicked and copy some text from the DB. This in itself works fine, BUT for some reason it is only working with the LAST IF case. (If there are 4 entries, it works on the 4th and the first 3 stay blank. If there are 2 entries, it works on only the 2nd). My PHP:

foreach ($bosses as $key => $boss) {
    $i ++;

        if($i == 1){
            echo "<div class='item57'><p id='T1$i'>{$boss['boss']}</p></div>";
            echo "<div class='item58'><button class='btn' id='tt' data-clipboard-text='{$boss['waylink']}' onclick='checkTQ(this)' ><img src='{$boss['image']}' /></button></div>";
            echo "<div class='item67'><p id='T2$i'>{$boss['boss']}</p></div>";
            echo "<div class='item68'><button class='btn' id='tt' data-clipboard-text='{$boss['waylink']}' onclick='checkTQ(this)' ><img src='{$boss['image']}' /></button></div>";
        }else{
            echo "<div class='item57'></div>";
            echo "<div class='item58'></div>";
            echo "<div class='item67'></div>";
            echo "<div class='item68'></div>";
        }if($i == 2){
            echo "<div class='item59'><p id='O1$i'>{$boss['boss']}</p></div>";
            echo "<div class='item60'><button class='btn' id='tt' data-clipboard-text='{$boss['waylink']}' onclick='checkOC(this)' ><img src='{$boss['image']}' /></button></div>";
            echo "<div class='item69'><p id='O2$i'>{$boss['boss']}</p></div>";
            echo "<div class='item70'><button class='btn' id='tt' data-clipboard-text='{$boss['waylink']}' onclick='checkOC(this)' ><img src='{$boss['image']}' /></button></div>";
        }else{
            echo "<div class='item59'></div>";
            echo "<div class='item60'></div>";
            echo "<div class='item69'></div>";
            echo "<div class='item70'></div>";
        }if($i == 3){ (ETC)

When I take out the IF statements, and jsut have everything show, and do not refer to the DB, it works. But That is useless to me I.E.

    /* echo "<div class='item57'><p id='T1$i'>Tequatl</p></div>";
    echo "<div class='item58'><img src='https://i.imgur.com/4PMxMgr.jpg' id='tt' onclick='checkTQ(this)' /></div>";
    echo "<div class='item67'><p id='T2$i'>Tequatl</p></div>";
    echo "<div class='item68'><img src='https://i.imgur.com/4PMxMgr.jpg' id='cc' onclick='checkTQ(this)' /></div>";

    echo "<div class='item59'><p id='O1$i'>Octovine</p></div>";
    echo "<div class='item60'><img src='https://i.imgur.com/ny1nG0h.png' id='dd' onclick='checkOC(this)'  /></div>";
    echo "<div class='item69'><p id='O2$i'>Octovine</p></div>";
    echo "<div class='item70'><img src='https://i.imgur.com/ny1nG0h.png' id='vv' onclick='checkOC(this)'  /></div>";

    echo "<div class='item61'><p id='a$i'>Sylus</p></div>";
    echo "<div class='item62'><img src='https://i.imgur.com/yYQmZxp.jpg' id='tt' onclick='checkTQ(this)' /></div>";
    echo "<div class='item71'><p id='a$i'>Sylus</p></div>";
    echo "<div class='item72'><img src='https://i.imgur.com/yYQmZxp.jpg' id='cc' onclick='checkTQ(this)' /></div>";

    echo "<div class='item63'><p id='Dd$i'>Pocklicker</p></div>";
    echo "<div class='item64'><img src='https://i.imgur.com/rtr6U0e.jpg' id='jj' onclick='checkTQ(this)'  /></div>";
    echo "<div class='item73'><p id='Di$i'>Pocklicker</p></div>";
    echo "<div class='item74'><img src='https://i.imgur.com/rtr6U0e.jpg' id='kk' onclick='checkTQ(this)'  /></div>";

    echo "<div class='item65'><p id='De$i'>Eli</p></div>";
    echo "<div class='item66'><img src='https://i.imgur.com/LNrBabf.jpg' id='ww' onclick='checkTQ(this)'  /></div>";
    echo "<div class='item75'><p id='Dj$i'>Eli</p></div>";
    echo "<div class='item76'><img src='https://i.imgur.com/LNrBabf.jpg' id='ee' onclick='checkTQ(this)'  /></div>"; */

I don't think it matters, but this is the example JScript I have loaded in at the end of my page to do the onclick changes:

function checkOC(element) {
    var aTag= element.parentElement.previousElementSibling.firstChild;
    if (element.src == "https://i.imgur.com/ny1nG0h.png") 
    {
        element.src = "https://i.imgur.com/TaMu47g.png";

        var d = moment().format('dddd');
        var ds = d.fontsize(5);

        var aText = 'Octovine \n' + ds;
        aText = aText.replace(" \n", "<br />");
        aTag.innerHTML = aText;

        localStorage.setItem(aTag.id, aText);

    }
    else 
    {
        element.src = "https://i.imgur.com/ny1nG0h.png";
        aTag.innerHTML = "Octovine";

        localStorage.removeItem(aTag.id);
    }
}

Ultimately my question is: Why is only my last if($i == X) operational, and how would I resolve this?