footnote with javascript: how hide it clicking anywhere

Question

I have a website with several papers with footnotes.
So far I have adopted the classic system of referring to the footnotes at the bottom of the article with an internal link, from which you then return to the body of the paper by clicking on the note number.
But I found that it is possible with javascript to have a more comfortable system that keeps the footnote inside the screen you are reading on.
The code is this:

  function toggleDiv (divId) {
     $ ("#" + divId) .toggle ();
  }

.dynamicnote {display: none;  
   position: fixed;  
   bottom: 2%;  
   margin-left: auto;  
   margin-right: auto;}

<a href = "javascript: toggleDiv ('n1');" id = "1a"> 1 </a>  

<p id = "n1" class="dynamicnote"> <a href="#1a"> 1 </a> [sometext] </p>

The problem is that this works perfeclty if I click on the anchor (once read the note), and then the footnote disappears; otherwise, if I click the next anchor the new footnote goes over the previous one, and it is ugly and confusing. You can see this script at this url

How to fix? Perhaps with a javascript command to hide the div shown clicking anyywhere?

Answer 1

updated answer: If this is worse let me know and i'll put the old one back. update two: This works only on the second click, so the first link will not have the animation (but still works like in the first one). I am still working on the solution for the first click. Again, if this is worse, let me know.

var currDiv = 'footNote';
function toggleDiv(divId) {
  if(currDiv=='footNote'){
    document.getElementById('footTwo').classList.add('no-height');
    document.getElementById('footTwo').innerHTML='';
    document.getElementById('footNote').classList.remove('no-height');
    var elem = document.getElementById(divId).cloneNode(true);
    elem.id = 'fntext';
    document.getElementById('footNote').appendChild(elem);
    var ftnt= document.getElementById('fntext');
    ftnt.replaceWith(...ftnt.childNodes);
    currDiv=0;
  }else{   
    document.getElementById('footNote').classList.add('no-height');
    document.getElementById('footNote').innerHTML='';
    document.getElementById('footTwo').classList.remove('no-height');
    var elem = document.getElementById(divId).cloneNode(true);
    elem.id = 'fntext';
    document.getElementById('footTwo').appendChild(elem);
    var ftnt= document.getElementById('fntext');
    ftnt.replaceWith(...ftnt.childNodes);
    currDiv = 'footNote';
  }
}

document.addEventListener("click", e => {
  if(e.target.className!=='href'){
    document.getElementById('footNote').innerHTML = '';
    document.getElementById('footTwo').innerHTML = '';
  }
});

.ftn {
  position: fixed;
  bottom: 10%;
  margin-left: auto;
  margin-right: auto;
  max-height: 100%;
  overflow: hidden;
  transition: max-height 0.8s ease-in-out;
}

.no-height {
  max-height:0;
  transition: max-height 0.8s ease-in-out;
  overflow-y: hidden;
}
.hide {
  display: none;
  color: red;
}

<a href="#1a" onclick='toggleDiv("n1")' id="1a" class='href'> 1 </a>
<div id="n1" class="hide">
  <a href="#1a"> 1 </a> [sometext]
</div>
<br>
<a href="#2a" onclick='toggleDiv("n2")' id="2a" class='href'> 2 </a>
<div id="n2" class="hide">
  <a href="#2a"> 2 </a> [sometext2]
</div>

<div id='footNote' class='ftn'> </div>
<div id='footTwo' class='ftn'> </div>