JSFiddle - React, Tailwind, and code Playground

by RoryMcCrossan

HTML

<div class="info" id="hydrogen">
    <em>1</em>
    H    
    <p>Hydrogen</p>
</div>
<div class="info" id="helium">
    <em>2</em>
    Li
    <p>Helium</p>
</div>

<table class="propTable">
    <tr>
        <td>Melting Point</td>
        <td id="mPoint"></td>
    </tr>
    <tr>
        <td>Boiling Point</td>
        <td id="bPoint"></td>       
    </tr>
</table>

JavaScript

function propElements() {
    var elements = {
        hydrogen: { 
            "m_point": "14.01", 
            "b_point": "20.28"
        },
        helium: { 
            "m_point": "0", 
            "b_point": "4.22"
        }
    };

    $('.info').hover(function() {
        $("#mPoint").html(elements[this.id].m_point + " K");
        $("#bPoint").html(elements[this.id].b_point + " K");
    }, function() {
        $("#mPoint").html("unknown");
        $("#bPoint").html("unknown");
    });
}

propElements();