Javascript - Script doesn't work on second click

A basic question by a newbie…

I always encounter the same problem : I often want an element "A" to show an element "B" on click when "B" is hidden, but to hide it when it is visible. Here are two different try that doesn't work, where A is sup elements from the DOM and B is i elements from the DOM, thx a lot for your help :

    let ref = document.getElementsByTagName('sup');
    let refContent = document.getElementsByTagName('i');
    
    for(let i = 0; i < ref.length ; i++) {
        ref[i].addEventListener('click', function() {
            if (refContent[i].style.display == "inline") {
                refContent[i].style.display = "none";
            } else {
                refContent[i].style.display = "none";
            };
        });
    }

let ref = document.getElementsByTagName('sup');
let refContent = document.getElementsByTagName('i');

for(let i = 0; i < ref.length ; i++) {
    if (refContent[i].style.display == "") {
            ref[i].addEventListener('click', function() {
            refContent[i].style.display = "inline";
    });   
    } else {
        ref[i].addEventListener('click', function() {
        refContent[i].style.display = "none";
    });   
    }
}