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>

<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>

<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>

CSS

a { cursor: pointer; color: pink;}

JavaScript

$(document).ready(function () {
     $("[class^=input]").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);                
        $('.input'+res).toggle();
    });
    
    
}