title: Remove like buttons active state if clicked dislike for the same comment and remove dislike buttons active state if clicked like
body: <p>Please visit here to see live <a href="https://ibnul.neocities.org/_temporary/au2pr4/like-dis-icon-active-effect.html" rel="nofollow noreferrer">https://ibnul.neocities.org/_temporary/au2pr4/like-dis-icon-active-effect.html</a></p>
  
  <p>Here I have multiple comment sections with like, dislike and reply buttons for each comment.</p>
  
  <p>I have added a class name called <code>like-dis-icon-active</code> to the like dislike icons to make it active and remove the class name to make it inactive.</p>
  
  <p>When clicked the like and dislike button should be active and if clicked again it should become inactive.</p>
  
  <p>When the like button is active and then the user clicks dislike button the like button should be inactive and the dislike button should be active for the same comment but the like button on the other comment section should remain unchanged. And do the same for dislike buttons.</p>
  
  <p>Please do not use any id name cause I need to copy-paste this comment multiple times on the page and show it in pure JavaScript.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var like_btns = document.querySelectorAll('.other-com-likeicon');
  var dislike_btns = document.querySelectorAll('.other-com-dislikeicon');
  
  like_btns.forEach(btn =&gt; {
    btn.addEventListener('click', likeBtnsActive);
  });
  
  function likeBtnsActive(e) {
    var like_icon_con = e.target.closest('.ohter-com-likedisrepl-con');
    var like_icon = like_icon_con.querySelector('.other-com-likeicon');
    like_icon.classList.toggle('like-dis-icon-active');
  }
  
  
  dislike_btns.forEach(btn =&gt; {
    btn.addEventListener('click', dislikeBtnsActive);
  });
  
  function dislikeBtnsActive(e) {
    var dislike_icon_con = e.target.closest('.ohter-com-likedisrepl-con');
    var dislike_icon = dislike_icon_con.querySelector('.other-com-dislikeicon');
    dislike_icon.classList.toggle('like-dis-icon-active');
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    * {
        margin: 0px;
        font-family: 'Segoe UI', sans-serif;
      }
  
      .other-com-namcombtn-con {
        padding: 20px;
      }
  
      .other-comment-text {
        font-size: 14px;
        line-height: 1.5;
        color: gray;
        padding: 5px 0px 5px 0px;
      }
  
      .ohter-com-likedisrepl-con {
        user-select: none;
        display: flex;
        align-items: center;
        padding: 2px 0px 2px 0px;
      }
  
      .other-com-likeicon {
        width: 12px;
        height: 12px;
        padding: 2px 3px 2px 1px;
        margin: 2px 7px 2px 0px;
        opacity: 0.6;
      }
  
      .other-com-likeicon:hover {
        opacity: 1;
      }
  
      .other-com-likeicon:focus {
        outline: none;
      }
  
      .other-com-likecount {
        font-size: 13px;
        color: gray;
      }
  
      .other-com-dislikeicon {
        width: 12px;
        height: 12px;
        padding: 2px 3px 2px 3px;
        margin: 2px 7px 2px 25px;
        opacity: 0.6;
      }
  
      .other-com-dislikeicon:hover {
        opacity: 1;
      }
  
      .other-com-dislikeicon:focus {
        outline: none;
      }
  
      .other-com-dislikecount {
        font-size: 13px;
        color: gray;
      }
  
      .other-com-replybtn {
        font-size: 13px;
        color: gray;
        padding: 4px 12px;
        margin: 0px 0px 0px 20px;
      }
  
      .other-com-replybtn:hover {
        background-color: rgb(241, 241, 241);
      }
  
      .like-dis-icon-active {
        opacity: 1;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang='en-US'&gt;
  
  &lt;head&gt;
    &lt;title&gt;like-dis-icon-active-effect&lt;/title&gt;
    &lt;meta charset='UTF-8'&gt;
    &lt;meta name='viewport' content='width=device-width, initial-scale=1'&gt;
  &lt;/head&gt;
  
  &lt;!-- start --&gt;
  &lt;body&gt;
  
  &lt;div class='other-com-namcombtn-con'&gt;
    &lt;p class='other-comment-text'&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.&lt;/p&gt;
    &lt;div class='other-com-likedisbtnscom-con'&gt;
      &lt;div class='ohter-com-likedisrepl-con'&gt;
        &lt;img class='other-com-likeicon' tabindex='0' src='https://ibnul.neocities.org/_temporary/au2pr4/thumbs-up-icon.svg' alt='' title='Like'&gt;
        &lt;p class='other-com-likecount'&gt;24&lt;/p&gt;
        &lt;img class='other-com-dislikeicon' tabindex='1' src='https://ibnul.neocities.org/_temporary/au2pr4/thumbs-down-icon.svg' alt='' title='Dislike'&gt;
        &lt;p class='other-com-dislikecount'&gt;3&lt;/p&gt;
        &lt;p class='other-com-replybtn'&gt;REPLY&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class='other-com-namcombtn-con'&gt;
    &lt;p class='other-comment-text'&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium eaque.&lt;/p&gt;
    &lt;div class='other-com-likedisbtnscom-con'&gt;
      &lt;div class='ohter-com-likedisrepl-con'&gt;
        &lt;img class='other-com-likeicon' tabindex='0' src='https://ibnul.neocities.org/_temporary/au2pr4/thumbs-up-icon.svg' alt='' title='Like'&gt;
        &lt;p class='other-com-likecount'&gt;24&lt;/p&gt;
        &lt;img class='other-com-dislikeicon' tabindex='1' src='https://ibnul.neocities.org/_temporary/au2pr4/thumbs-down-icon.svg' alt='' title='Dislike'&gt;
        &lt;p class='other-com-dislikecount'&gt;1&lt;/p&gt;
        &lt;p class='other-com-replybtn'&gt;REPLY&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class='other-com-namcombtn-con'&gt;
    &lt;p class='other-comment-text'&gt;Sed ut perspiciatis unde omniserror sit voluptatem accusantium eaque.&lt;/p&gt;
    &lt;div class='other-com-likedisbtnscom-con'&gt;
      &lt;div class='ohter-com-likedisrepl-con'&gt;
        &lt;img class='other-com-likeicon' tabindex='0' src='https://ibnul.neocities.org/_temporary/au2pr4/thumbs-up-icon.svg' alt='' title='Like'&gt;
        &lt;p class='other-com-likecount'&gt;24&lt;/p&gt;
        &lt;img class='other-com-dislikeicon' tabindex='1' src='https://ibnul.neocities.org/_temporary/au2pr4/thumbs-down-icon.svg' alt='' title='Dislike'&gt;
        &lt;p class='other-com-dislikecount'&gt;2&lt;/p&gt;
        &lt;p class='other-com-replybtn'&gt;REPLY&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  &lt;!-- end --&gt;</code></pre>
  </div>
  </div>
  </p>