How do I use mouseover (or hover) so that I can display different images when I go over different texts? JAVASCRIPT

Question

I'm currently doing CS50 and I need to write a little html page inserting interactive elements from Javascript.I'm a total beginner with this language and I'm trying to find out how to display an image when I hover on a text. Apparently there's almost zero topic about this on internet, I've only found this,which does work but only with the first image.The reason is because the "id" is the same for all the urls,I get that,but how can I modify the code so that it can work for all the different texts/pictures?I kind of get the whole picture because I know Python but html and Js are brand new to me.Any help would be appreciated,thanks

 <div>
 <table>
   <tr>
     <th>Best Albums</th>
     <th>Year</th>
       </tr>
       <tr>
         <td><img class="hidden" id='image' src="https://cdn.mos.cms.futurecdn.net/2Lm375yVwwGyAHfNFP2HU6-970-80.jpg.webp"/> <span>Spreading the disease</span></td>
     <td>1985</td>
       </tr>
       <tr>
         <td><img class="hidden" id='image' src="https://cdn.mos.cms.futurecdn.net/jP4Fx9doBk4R27kg5hpsrd-970-80.jpg.webp"/> <span>Among the living</span></td>
         <td>1987</td>
       </tr>
        <tr>
        <td><img class="hidden" id='image' src="https://cdn.mos.cms.futurecdn.net/sj49Yj3eJERgwwVbZBZ5nJ-970-80.jpg.webp"/> <span>Persistence of time</span></td>
                <td>1990</td>
        </tr>
        <tr>
          <td><img class="hidden" id='image' src="https://cdn.mos.cms.futurecdn.net/BhDq2Bdm7axUP9erRcs5i9-970-80.jpg.webp"/> <span>Sound of white noise</span></td>
           <td>1993</td>
        </tr>
        <tr>
          <td><img class="hidden" id='image' src="https://cdn.mos.cms.futurecdn.net/fKVNiGMLbFtsXt6uC8aLMm-970-80.jpg.webp"/> <span>We've come for you all</span></td>
           <td>2003</td>
        </tr>
         
        </table>
        <script>
            $(document).ready(function () {
            $('span').hover(function(){
                $(this).addClass('underline');
                $('#image').show();
            },function(){
                $(this).removeClass('underline');
                $('#image').hide();
            });
        });</script>
    </div>
    
    <br><a href="scott.html"><button type="button">Check them out</button></a><br>
    
    </body>

Answer 1

ids have to be unique. So you need to find a different way to select the element. Since it is a sibling, you can use prev() to select it.

 $(document).ready(function() { $('span').hover(function() { $(this).addClass('underline').prev("img").show(); }, function() { $(this).removeClass('underline').prev("img").hide(); }); });

 .hidden { display: none; height: 100px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <table> <tr> <th>Best Albums</th> <th>Year</th> </tr> <tr> <td><img class="hidden" id='image' src="https://cdn.mos.cms.futurecdn.net/2Lm375yVwwGyAHfNFP2HU6-970-80.jpg.webp" /> <span>Spreading the disease</span></td> <td>1985</td> </tr> <tr> <td><img class="hidden" id='image' src="https://cdn.mos.cms.futurecdn.net/jP4Fx9doBk4R27kg5hpsrd-970-80.jpg.webp" /> <span>Among the living</span></td> <td>1987</td> </tr> <tr> <td><img class="hidden" id='image' src="https://cdn.mos.cms.futurecdn.net/sj49Yj3eJERgwwVbZBZ5nJ-970-80.jpg.webp" /> <span>Persistence of time</span></td> <td>1990</td> </tr> <tr> <td><img class="hidden" id='image' src="https://cdn.mos.cms.futurecdn.net/BhDq2Bdm7axUP9erRcs5i9-970-80.jpg.webp" /> <span>Sound of white noise</span></td> <td>1993</td> </tr> <tr> <td><img class="hidden" id='image' src="https://cdn.mos.cms.futurecdn.net/fKVNiGMLbFtsXt6uC8aLMm-970-80.jpg.webp" /> <span>We've come for you all</span></td> <td>2003</td> </tr> </table> </div> <br><a href="scott.html"><button type="button">Check them out</button></a><br> </body>