JSFiddle - React, Tailwind, and code Playground

by bluey

HTML

<div id='main'>
<div id='cunt1' class='title1' >
    title1
</div>
<div id='cunt1a' class='input1' >
    <input type='text' placeholder='input1' />
</div>
<div><a id='edit1' class='edit'>Edit</a></div>
<div><a id='close1' class='closesave'>Close</a> <a id='save1' class='closesave'>Save</a> </div>
<hr />


<div id='cunt2' class='title2'>
    title2
</div>
<div id='cunt2a' class='input2' >
    <input type='text' placeholder='input2' />
</div>
<div><a id='edit2' class='edit'>Edit</a></div>
<div><a id='close2' class='closesave'>Close</a> <a id='save2' class='closesave'>Save</a> </div>
<hr />

<div id='cunt3' class='title3'>
    title3
</div>
<div id='cunt3a' class='input3' >
    <input type='text' placeholder='input2' />
</div>
<div><a id='edit3' class='edit'>Edit</a></div>
<div><a id='close3' class='closesave'>Close</a> <a id='save3' class='closesave'>Save</a> </div>
</div>

CSS

a { cursor: pointer; color: pink;}

JavaScript

$(document).ready(function () {
     $("[class^=input]").hide();
    $(".closesave").hide();
    init();
    
});

function init() {
  
    $('.edit').live('click', function(){
               
        //var id1 = this.id.slice(4);
        var id1 = $(this).attr('id');
        var res = id1.substr(4);
        //alert(res);                
        
        $("[class^=input]").hide();
         $("[id^=edit]").show();
          $("[id^=save]").hide();
            $("[id^=close]").hide();
        
        $('.input'+res).show();   
        
         if ($('.input'+res).is(':visible')) {
                   $('#close'+res).show();
                    $('#save'+res).show();
                     $('#edit'+res).hide();
           } else if (!$('.input'+res).is(':visible')){
                 $('#close'+res).hide();
                    $('#save'+res).hide();
                     $('#edit'+res).show();
            }
        
        
     // if (!$('.input'+res).is(':visible')) {
     //   $('.input'+res).show();
     // }
        
    });
    
    
}