JSFiddle - React, Tailwind, and code Playground

by BenjaminRay

HTML

<ul>
  <li>
    <div class="dropdown dropdown-commentdeleteedit">
      <a href="#" class="editform-dropdown">Click Me 1</a>
      <div class="editcommentform" style="display: none;">
        Edit comment form 1
      </div>
      <div class="editcomment-text">
        Edit comment text 1
      </div>
    </div>
  </li>
  <li>
    <div class="dropdown dropdown-commentdeleteedit">
      <a href="#" class="editform-dropdown">Click Me 2</a>
      <div class="editcommentform" style="display: none;">
        Edit comment form 2
      </div>
      <div class="editcomment-text">
        Edit comment text 2
      </div>
    </div>
  </li>
    <li>
    <div class="dropdown dropdown-commentdeleteedit">
      <a href="#" class="editform-dropdown">Click Me 3</a>
      <div class="editcommentform" style="display: none;">
        Edit comment form 3
      </div>
      <div class="editcomment-text">
        Edit comment text 3
      </div>
    </div>
  </li>
</ul>

JavaScript

//HIDE AND SHOW COMMENT EDIT FORM ON DROPDOWN
$(document).on('click', '.editform-dropdown', function(event){
  $(event.target).closest('li').find('.editcommentform').show();
  $(event.target).closest('li').find('.editcomment-text').hide();
  alert($(event.target).html());
});