How to target an id inside of a div class when I hover a different parent div class with jquery?

Question

So as the question says, I am trying to hover the class button1 and get the id of 'css'. With my current code, all I get is the id html. I need to get a unique id that's pertinent to which button I hover. I'm still newer to jquery and javascript in general but I can't seem to find any information on this topic so any reference source would be great too if possible.

Here's my code:

HTML

<div class="button1">       
     <div class="text">
          <p>Skill<br /> <span class="Score" id = "html">10/10 </span> </p>
     </div>

     <div class="button1 Overlay">
     </div>
<div class="button1">       
     <div class="text">
          <p>Skill<br /> <span class="Score" id = "css">9/10 </span> </p>
     </div>

     <div class="button1 Overlay">
     </div>
</div> 

Jquery

('.button1').mouseover(function(event) {
    $(".text").attr('id');
})

Answer 1

With your current code you get nothing, since .text does not have ID and result is never used. Use $(this).find('.Score').attr('id')[1].

Note few bug fixes:

1. ('.button1').mouseover is missing $
2. You have nested .button1 (first one is not properly closed, use proper indentation for easier debugging), so it's impossible to find singe element, because you hover on top most element

$('.button1').mouseover(function(event) {
  console.log($(this).find('.Score').attr('id'))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button1">
  <div class="text">
    <p>Skill<br /> <span class="Score" id="html">10/10 </span> </p>
  </div>

  <div class="button1 Overlay">
  </div>
</div>
<div class="button1">
  <div class="text">
    <p>Skill<br /> <span class="Score" id="css">9/10 </span> </p>
  </div>

  <div class="button1 Overlay">
  </div>
</div>