title: How to apply same function to different div's of the same name?
body: <p>When I click on the watch-later icon, the tick will appear correctly.</p>
  
  <p>However, when I apply the same div format to another section, the tick will appear at the first div. </p>
  
  <p>This is my HTML and JavaScript:</p>
  
  <pre><code>&lt;div class="hovertext"&gt; &lt;span class="video-txt"&gt;01:54&lt;/span&gt;
      &lt;span class="watch-later"&gt;&lt;input type="image" onclick="showTick()" src="images/watchlater.jpg" /&gt;&lt;/span&gt;
      &lt;span id="tick" style="display:none;"&gt;&lt;input type="image" onclick="conceal()" onMouseOut="hideTick()" src="images/tick.jpg" /&gt;&lt;/span&gt;
      &lt;script type="text/javascript"&gt;
      function conceal() {
          if (document.getElementById('tick').style.display == 'block') {
              document.getElementById('tick').style.display = 'none';
          }
      }
  
      function showTick() {
          if (document.getElementById('tick').style.display == 'none') {
              document.getElementById('tick').style.display = 'block';
          }
      }
  
      function hideTick() {
          if (document.getElementById('tick').style.display == 'block') {
              document.getElementById('tick').style.display = 'none';
          }
      }
      &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It's appearing like this</p>
  
  <p><img src="https://i.stack.imgur.com/7a333.jpg" alt="enter image description here"></p>
  
  <p>I want it to appear like this. How do I change the JavaScript or the div in-line so that it won't affect any other div but yet run the same function?</p>
  
  <p><img src="https://i.stack.imgur.com/G64l8.jpg" alt="enter image description here"></p>
  
  <p>Please, any help will be appreciated.</p>