title: OnClick Individual JavaScript Popup
body: <p>I am having a bit of trouble with this code that I have been playing with. I have it so that, at least so far, that a popup will show when a text is selected. The issue is that I cannot get it to work for all 4 so that I get 4 different pop ups, all the pop ups are connected to the first. I also am trying to get it so that the pop up shows under each button clicked. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;style&gt;
  .popup {
      position: relative;
      display: inline-block;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
  }
  
  .popup .popuptext {
      visibility: hidden;
      width: 160px;
      background-color: #555;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 8px 0;
      position: absolute;
      z-index: 1;
      bottom: -250%;
      left: 50%;
      margin-left: -80px;
  }
  
  .popup .show {
      visibility: visible;
      -webkit-animation: fadeIn 1s;
      animation: fadeIn 1s;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body style="text-align:center"&gt;
  
  &lt;div class="popup" onclick="myFunction()"&gt;First Popup
    &lt;span class="popuptext" id="myPopup"&gt;This is the first pop up selected&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class="popup" onclick="myFunction()"&gt;second Popup
    &lt;span class="popuptext" id="myPopup"&gt;This is the second pop up selected&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class="popup" onclick="myFunction()"&gt;third Popup
    &lt;span class="popuptext" id="myPopup"&gt;This is the third pop up selected&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class="popup" onclick="myFunction()"&gt;Fourth Popup
    &lt;span class="popuptext" id="myPopup"&gt;This is the fouth pop up selected&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  function myFunction() {
      var popup = document.getElementById("myPopup");
      popup.classList.toggle("show");
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My question is how do I get it so that the pop ups show up properly under each text?</p>
  
  <p>Thank you.</p>