JSFiddle - React, Tailwind, and code Playground

by Jagrati Tomar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class = "abc">

<div class="form-group" style="">
    <label >Email:</label>
    <button type="button" id="new" style="margin-top:7px;"  class="toggle-new-form1 pull-right btn btn-primary">Edit</button>
    <p> [email protected]  </p>
    </div>
    <form  id="name-form" class="new-form1 hidden" method="POST"  action="">
    <input id="email">
<button type="submit"> Submit </button> 
    </form>
    
    <div class="form-group" style="">
    <label >Email:</label>
    <button type="button" id="new" style="margin-top:7px;"  class="toggle-new-form2 pull-right btn btn-primary">Edit</button>
    <p> [email protected]  </p>
    </div>
    <form  id="name-form" class="new-form2 hidden" method="POST"  action="">
    <input id="email">
<button type="submit"> Submit </button> 
    </form>
    
    <div class="form-group" style="">
    <label >Email:</label>
    <button type="button" id="new" style="margin-top:7px;"  class="toggle-new-form3 pull-right btn btn-primary">Edit</button>
    <p> [email protected]  </p>
    </div>
    <form  id="name-form" class="new-form3 hidden" method="POST"  action="">
    <input id="email">
<button type="submit"> Submit </button> 
    </form>
    </div>

JavaScript

$(document).ready(function() {
      $('.abc').on('click','[class^= "toggle-new-form"]',function() {
     var $var  = $(this).parent().next();
    	$var.toggleClass("hidden");
      $('[class^="new-form"]').not($var).addClass('hidden');
  });

});