JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bios">
      <ul>
        <li>
            <img src="../img/fs.jpg" alt="John Doe">
            <br>
            <span class = "name">John Doe</span>
            <p>Lorem ipsum dolor</p>
        </li>

        <li>
            <img src="../img/bd.png" alt="Bob Doe">
            <br>
            <span class = "name">Bob Doe</span>
            <p>Lorem ipsum dolor sit amet,</p>
        </li>

        <li>
            <img src= "../img/apj.png" alt="Tom Doe">
            <br>    
            <span class = "name">Tom Doe</span>
            <p>Lorem ipsum dolor sit amet, consectetur</p>
        </li>

       </ul>    
</div>
    <div id = "thumb">
      <ul>  
        <li>
           <a href="javascript:void(0)">
            <img src="../img/jdthumb.png" alt="John Doe">
            <br>
            John Doe 
           </a>
        </li>


        <li>
           <a href="javascript:void(0)">
            <img src="../img/bdthumb.png" alt="Bob Doe">
            <br>
            Bo b Doe
            <a/>
        </li>

        <li>    
          <a href="javascript:void(0)">
            <img src= "../img/tdthumb.png" alt="Tom Doe">
            <br>
            Tom Doe
          </a>
        </li>   

    </ul>
</div>

CSS

#bios > ul > li{
    display: none;
}
#bios > ul > li:first-child{
    display: block;
}

JavaScript

$(function(){
    $('#thumb ul li').click(function(){
        var index = $(this).index();
        alert(index);
        $('#bios ul li').hide();
        var a = $('#bios ul li').eq(index);
        alert(a);
        $('#bios ul li').eq(index).show();
    });
});