JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="det_cont">
<ul>
<li>
<span class="lispan_1">Mobile</span>
<span class="lispan_2">:</span>
<span class="lispan_3">
<input type="text" id="umob" maxlength="20" disabled>
<span class="lispan_sub" id="mobli">
<button class="lispan_4 add" title="Add" id="mobadd">Add</button>
</span>
</span>
</li>
<li>
<span class="lispan_1">Date of Birth</span>
<span class="lispan_2">:</span>
<span class="lispan_3">
<input type="text" id="udob" maxlength="11" disabled>
<span class="lispan_sub" id="dobli">
<button class="lispan_4 add" title="Add" id="dobadd">Add</button>
</span>
</span>
</li>
<li>
<span class="lispan_1">Gender</span>
<span class="lispan_2">:</span>
<span class="lispan_3">
<input type="text" id="ugen" maxlength="6" disabled>
<span class="lispan_sub" id="genli">
<button class="lispan_4 add" title="Add" id="genadd">Add</button>
</span>
</span>
</li>
</ul>
</div>
</body>
JavaScript
$(document).ready(function(){
var othli = new Array();
othli[1] = $('#mobli').html();
othli[2] = $('#dobli').html();
othli[3] = $('#genli').html();
$('#det_cont .lispan_4').on('click',function() {
if($(this).hasClass('add')) {
if(this.id == 'mobadd') {
$('#umob').prop("disabled",false);
$('#umob').css({backgroundColor: '#FFFFFF'});
$('#det_cont input').not('#umob').blur();
$('#det_cont input').not('#umob').prop("disabled",true);
$('#det_cont input').not('#umob').css({backgroundColor: 'rgba(0,255,153,0)'});
$('#umob').focus();
$('#mobli').html('<button class="lispan_4 sub" title="Submit" id="mobsub">Submit</span>');
$('#dobli').html(othli[2]);
$('#genli').html(othli[3]);
} else if(this.id == 'dobadd') {
$('#udob').prop("disabled",false);
$('#udob').css({backgroundColor: '#FFFFFF'});
$('#det_cont input').not('#udob').blur();
$('#det_cont input').not('#udob').prop("disabled",true);
$('#det_cont input').not('#udob').css({backgroundColor: 'rgba(0,255,153,0)'});
$('#udob').focus();
$('#dobli').html('<button class="lispan_4 sub" title="Submit" id="dobsub">Submit</span>');
$('#mobli').html(othli[1]);
$('#genli').html(othli[3]);
} else if(this.id == 'genadd') {
$('#ugen').prop("disabled",false);
$('#ugen').css({backgroundColor: '#FFFFFF'});
$('#det_cont input').not('#ugen').blur();
$('#det_cont input').not('#ugen').prop("disabled",true);
$('#det_cont input').not('#ugen').css({backgroundColor: 'rgba(0,255,153,0)'});
$('#ugen').focus();
$('#genli').html('<button class="lispan_4 sub" title="Submit" id="gensub">Submit</span>');
$('#dobli').html(othli[2]);
$('#mobli').html(othli[1]);
}
}
});
});