JSFiddle - React, Tailwind, and code Playground

HTML

<div id="topcontainer"></div>

<div id="bottomcontainer">
<a href="elementfile.php?action=Oxygen" target="_blank">
<div id="Oxygen" class="element group16 period2">    
<span class="number">8</span><br>    
<span class="symbol">O</span><br>    
<span class="name">Oxygen</span><br>    
<span class="molmass">15.9994</span></div></a>
    </div>

CSS

#topcontainer {
    width:120px;
    height:200px;
    border:2px solid;
    font-size:2em;
    margin:20px auto 20px;
}
.number {
    float:right;
}
a .element {
   text-decoration:none;
}
.element {
    border:1px solid;
    padding:5px;
    text-decoration:none;
    width:60px;
}

.symbol {
    font-size:1.5em;
    text-decoration:none;
}

JavaScript

jQuery(document).on('mouseover','.element',function() {
      var content=jQuery(this).html();
        jQuery('#topcontainer').html(content);     
},
);