I have a php web page with many informations on it, some of them are quite sensitive and I would like hide them and the possibilty to unhide them.

My web page is built like this to show the informations :

echo '<b>Login :</b> ' . $data['Login'] . '<br \>';
echo '<b>MDP :</b>' . decrypt($data['MDP'], $passkey) . '';

So I'm working on a small Javascript code to hide/show the MDP. It's not finished (cause it work only half), it look like this :

<span class="visible">My text to hide</span><br \>
<span class="visible">My other text to hide</span><br \>

<button id="Replace" onclick="replace()">Change content</button>
<script>
window.onload = function(){
document.getElementById("Replace").addEventListener( 'click', replace);
}
var Visible = document.getElementsByClassName('visible');
var HiddenText = document.getElementsByClassName('hiddentext');
var OriginalText = new Array();
for (var k = 0; k< Visible.length; k++){
OriginalText[k] = Visible[k].innerHTML;
}

function replace() {
if (Visible != null){
for (var i = 0; i< Visible.length; i++){
Visible[i].innerHTML = '*****';
Visible[i].className = 'hiddentext';
}
}else{
for (var j = 0; j< HiddenText.length; j++){
HiddenText[j].innerHTML = OriginalText[j];
HiddenText[j].className = 'visible';
}
}
}
</script>

I don't know why it look like it only work once. It replace the text with the stars and the Class change well but when I use it again, nothing happen.

I tried the code separetely (both part of the if) and all work good. I'm far from an expert to code so I probably missing something, maybe someone can help me on it.