The most confusing javascript/jquery bug I have ever encountered.

So this post is in reference to this site by Aisha Blake: http://port-80-4oxccsofvo.treehouse-app.com/# Okay so this is kind of tricky to explain, so if you did the intro to jquery course you'll know that she talked about how to do events and replace text. So on this site she used just jquery to change the state of the location text under each of the dog photos. It works fine but if you put your mouse on the left side of the "Location:" text and hover over and hover back off the same way (left-on, left-off)------>(----------------------------------------this is your mouse---->Location")....it stays in the "Your house?!" text state. And I attempted to fix it with just plain javascript:

const pLoc = document.querySelectorAll('p.loc');

for (let i = 0; i < pLoc.length; i++)
{
    pLoc[i].addEventListener('mouseover', e => e.target.textContent = 'Location: Your house?!');
    pLoc[i].addEventListener('mouseout', e => e.target.textContent = 'Location: Treehouse Adoption Center');
}

and that made a weird issue where both text was being displayed at the same time, so finally I fixed the problem completely with this javascript:

const pLoc = document.querySelectorAll('p.loc');

for (let i = 0; i < pLoc.length; i++)
{
    pLoc[i].addEventListener('mouseover', () => pLoc[i].textContent = 'Location: Your house?!');
    pLoc[i].addEventListener('mouseout', () => pLoc[i].textContent = 'Location: Treehouse Adoption Center');
}

and by the way here is the original jquery if needed:

$('p.loc').hover(function() { 
  $(this).html("<strong>Location:</strong> Your house?!");
}, function() { 
  $(this).html("<strong>Location:</strong> Treehouse Adoption Center");
}); 

can someone please explain this weird behavior is known or is this some sort of bug? Also what is the difference between "e.target" and "pLoc[i]"