JSFiddle - React, Tailwind, and code Playground

HTML

<script>
  function myFunction() {
    var x = document.getElementById('myDIV');
    if (x.style.display === 'block') {
      x.style.display = 'none';
    } else {
      x.style.display = 'block';
    }
  }
  </script>
  <script>
  function myOtherFunction() {
    var x = document.getElementById('myOtherDIV');
    if (x.style.display === 'block') {
      x.style.display = 'none';
    } else {
      x.style.display = 'block';
    }
  }
  </script>
<div>
  <ul style="list-style-type:none" id="navlist">
    <li class="titles">Letter:</li>
    <br>
    <li>
      <button onclick="myFunction()" class='button'>A</button>
      <div id="myDIV">
        <img src="https://i.pinimg.com/564x/77/97/2d/77972d9d8364c1c94aa6520af5836548.jpg" class='chordimg'>
        <img src="http://i.stack.imgur.com/sQcAY.png" class='chordimg'>
      </div>
    </li>
  </ul>
  <div>
    <ul style="list-style-type:none" id="navlist">
      <li class="titles">Color</li>
      <br>
      <li>
        <button onclick="myOtherFunction()" class='button'>Blue</button>
        <div id="myOtherDIV">
          <img src="http://www.drodd.com/images15/letter-a25.jpg" class='chordimg'>
          <img src="https://etc.usf.edu/presentations/extras/letters/varsity_letters/39/13/a-400.png" class='chordimg'>
          <img src="http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=42246936" class='chordimg'>
        </div>
      </li>

CSS

#myDIV {
  display: none;
  position: absolute;
  top: 125px;
  left: 40px;
}

#myOtherDIV {
  display: none;
  position: absolute;
}

#navlist li {
  display: inline;
  list-style-type: none;
  padding-right: 20px;
}