JSFiddle - React, Tailwind, and code Playground

by Ketan Patel

HTML

<div>
	<a href='#' class='edit'>
		<span>Edit</span>
	</a> 
</div>
<form method="post" action="#pageone" data-ajax="false">
<label for="name">Name : <span class="spnname">Ketan</span></label>
<input type="text" name="name" id="name" placeholder="Name" class='com_text'/><br>
<label for="email">Email: <span class="spnemail">Email</span></label>
<input type="email" id="email" name="email" placeholder="Email" class='com_text'/><br>
	<button class='save' type='submit'>Save</button>
	<button class='cancel' type='reset'>Cancel</button>
</form>

CSS

label
{
	line-height:15px;
	font-weight:normal;
	margin-top:0px;
}
input
{
	display:none;
	width:270px;
	margin-top:-10px;
}

button
{
	display:none;
	margin-right:15px;
	margin-left:70px;
	margin-top:-10px;
}

JavaScript

$(document).ready(function()
{
	//Edit
	$('.edit').click(function()
	{ 
		$(this).hide();
    $(".spnname").hide();
    $(".spnemail").hide();
		$(".com_text").show();
		$('.save').show();
    $('.cancel').show();
	});

	//Cancel
	$('.cancel').click(function()
	{ 
		$(this).hide();
    $(".com_text").hide();
		$(".save").hide();
		$(".edit").show();
		
	});

	//Save
	$('.save').click(function(){
  $(this).hide();
  	$(".com_text").hide();
		$(".cancel").hide();
		$(".edit").show();
	});
});