How do I assign data when elements have the same class?

Question

I keep facing a small issue.. It's about Classes & IDs

Let's say I have a 2 div with 5 paragraphs in them, all paragraphs represent the same thing. So the first paragraph represents Time, second one wether etc..

Now picture yourself adding a tooltip when hovering over the element that will display all the paragraphs.

If you want to change those values based on the one you are hovering over, how would you assign data to that specific class? See this is bad.. Because Id's are unique

 <a href="javascript:void(0)" id="headLeftSlot" class="itemSlot"> <div class="headSlot"> <div class="itemImage" id="headSlot"> </div> <section> <span class="tooltiptext"> <h3 id="itemInfoName">Item Name</h3> <h4>Attack bonuses</h4> <p id="aStab">Stab: +5</p> <p id="aSlash">Slash: +5</p> <p id="aCrush">Crush: +5</p> <p id="aMagic">Range: +5</p> <p id="aRange">Range: +5</p> <h4>Defence bonuses</h4> <p id="dStab">Stab: +5</p> <p id="dSlash">Stab: +5</p> <p id="dCrush">Stab: +5</p> </span> </section> </div> </a> <div class="topItems"> <a href="javascript:void(0)" id="capeLeftSlot" class="itemSlot"> <section class="capeSlot"> <div class="itemImage" id="capeSlot"> </div> <span class="tooltiptext"> <h3 id="itemInfoName">Item Name</h3> <h4>Attack bonuses</h4> <p id="aStab">Stab: +5</p> <p id="aSlash">Slash: +5</p> <p id="aCrush">Crush: +5</p> <p id="aMagic">Range: +5</p> <p id="aRange">Range: +5</p> <h4>Defence bonuses</h4> <p id="dStab">Stab: +5</p> <p id="dSlash">Stab: +5</p> <p id="dCrush">Stab: +5</p> </span> </section> </a> 

But if I assign them classes instead of ID's how would I change the second divs content when hovering?

Because now I am doing this, which is bad.

$('.itemImage').mouseover(function(event){
    if(model != null){
        document.getElementById("itemInfoName").style.color = "Orange";
        document.getElementById("itemInfoName").innerHTML = model.Name;
        document.getElementById("aStab").innerHTML = "Stab: " + model.AStab;
        document.getElementById("aSlash").innerHTML = "Slash: " + model.ASlash;
        document.getElementById("aCrush").innerHTML = "Crush: " + model.ACrush;
        document.getElementById("aMagic").innerHTML = "Magic: " + model.AMagic;
        document.getElementById("aRange").innerHTML = "Range: " + model.ARange;

        document.getElementById("dStab").innerHTML = "Stab: " + model.DStab;
        document.getElementById("dSlash").innerHTML = "Slash: " + model.DSlash;
        document.getElementById("dCrush").innerHTML = "Crush: " + model.DCrush;
        document.getElementById("dMagic").innerHTML = "Magic: " + model.DMagic;
        document.getElementById("dRange").innerHTML = "Range: " + model.DRange;

        document.getElementById("mStrength").innerHTML = "Melee Strength: " + model.MeleeStrength;
        document.getElementById("rStrength").innerHTML = "Ranged Strength: " + model.RangedStrength;
        document.getElementById("mDamage").innerHTML = "Magic Damage: " + model.MagicDamage;
        document.getElementById("Prayer").innerHTML = "Prayer: " + model.Prayer;

    }

});

Answer 1

You can identify the divs by different data attributes. Example, you have two elements with the same class 'tooltiptext'

<span class="tooltiptext">

you can add some data attr to differentiate it

<span class="tooltiptext" data-some-id="1">

Then you can select it by doing:

$(".tooltiptext[data-some-id='1']")

  <a href="javascript:void(0)" id="headLeftSlot" class="itemSlot"> <div class="headSlot"> <div class="itemImage" id="headSlot"> </div> <section> <span class="tooltiptext"> <h3 id="itemInfoName">Item Name</h3> <h4>Attack bonuses</h4> <p id="aStab">Stab: +5</p> <p id="aSlash">Slash: +5</p> <p id="aCrush">Crush: +5</p> <p id="aMagic">Range: +5</p> <p id="aRange">Range: +5</p> <h4>Defence bonuses</h4> <p id="dStab">Stab: +5</p> <p id="dSlash">Stab: +5</p> <p id="dCrush">Stab: +5</p> </span> </section> </div> </a> <div class="topItems"> <a href="javascript:void(0)" id="capeLeftSlot" class="itemSlot"> <section class="capeSlot"> <div class="itemImage" id="capeSlot"> </div> <span class="tooltiptext"> <h3 id="itemInfoName">Item Name</h3> <h4>Attack bonuses</h4> <p id="aStab">Stab: +5</p> <p id="aSlash">Slash: +5</p> <p id="aCrush">Crush: +5</p> <p id="aMagic">Range: +5</p> <p id="aRange">Range: +5</p> <h4>Defence bonuses</h4> <p id="dStab">Stab: +5</p> <p id="dSlash">Stab: +5</p> <p id="dCrush">Stab: +5</p> </span> </section> </a> 

 $(".tooltiptext").on("mouseover", function(e){ var el = $(e.currentTarget); $("#tip").html(el.data("tip")); }); $(".tooltiptext").on("mouseout", function(e){ var el = $(e.currentTarget); $("#tip").html(""); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="tip"></div> <a href="javascript:void(0)" id="headLeftSlot" class="itemSlot"> <div class="headSlot"> <div class="itemImage" id="headSlot"> </div> <section> <span class="tooltiptext" data-tip="my content1"> <h3 id="itemInfoName">Item Name</h3> <h4>Attack bonuses</h4> <p id="aStab">Stab: +5</p> <p id="aSlash">Slash: +5</p> <p id="aCrush">Crush: +5</p> <p id="aMagic">Range: +5</p> <p id="aRange">Range: +5</p> <h4>Defence bonuses</h4> <p id="dStab">Stab: +5</p> <p id="dSlash">Stab: +5</p> <p id="dCrush">Stab: +5</p> </span> </section> </div> </a> <div class="topItems"> <a href="javascript:void(0)" id="capeLeftSlot" class="itemSlot"> <section class="capeSlot"> <div class="itemImage" id="capeSlot"> </div> <span class="tooltiptext" data-tip="my content2"> <h3 id="itemInfoName">Item Name</h3> <h4>Attack bonuses</h4> <p id="aStab">Stab: +5</p> <p id="aSlash">Slash: +5</p> <p id="aCrush">Crush: +5</p> <p id="aMagic">Range: +5</p> <p id="aRange">Range: +5</p> <h4>Defence bonuses</h4> <p id="dStab">Stab: +5</p> <p id="dSlash">Stab: +5</p> <p id="dCrush">Stab: +5</p> </span> </section> </a> 

Answer 2

Put the tooltip span inside each of the paragraphs and set the css display properties by accessing the respective span element through p#myId > span { display:none; }, p#myId:hover > span {display:inline}. I admit I haven't tried it out yet, but it believe this should work. For the Javascript part you don't need mouseover functions, plain setting the element will do, saving you some lines of code, or just write the html.