JSFiddle - React, Tailwind, and code Playground

by Mohamed Amer

HTML

<div class="full-width" id="edit1">
   <img id="edit-click1" class="responsive" src="./images/icon.png">
   <div id="editable1" class="editable"> 1 </div>
</div>

<div class="full-width" id="edit2">
   <img id="edit-click2" class="responsive" src="./images/icon.png">
   <div id="editable2" class="editable"> 2 </div>
</div>

CSS

.editable{
  display : none;
}

JavaScript

$('.full-width').on('click', '.responsive', function (e) {
   var getEditable = $(this).closest('.full-width').find('.editable');
   $('.editable').not(getEditable).hide();
   getEditable.fadeToggle( "slow");
});