JQuery .hide one div and .show another at place of first one

Question

I have the following code. (form is hidden at the start)

HTML

<div1 id="js_sel1">
    <p> this is selct 1 </p> 
    <a class="js_showform" data-id="1" href="#">edit1</a>
</div>
<div2 id="js_sel2">
    <p> this is select 2 </p>
    <a class="js_showform" data-id="2" href="#">edit2</a>
</div>
<div3 id="js_sel3">
    <p> this is select 3 </p>
    <a class="js_showform" data-id="3" href="#">edit3</a>
</div>
<form id="js_form" class="js_hide_form">
    <p> this is my form </p>
    <a class="js_hideform" href="#">save</a>
</form>

jQuery

$(function() {
    var par = $('.js_hide_form');
    $(par).hide();
    $('.showform').click(function(e) {
      e.preventDefault();
      var hide_ele = "#js_sel" + $(this).data("id");
      var show_ele = "#js_form";
      $(hide_ele).hide;
      $(show_ele).show;
    });
    $('.hideform').click(function(e) {
      e.preventDefault();
      var hide_ele = "#js_form";
      var show_ele = "#js_sel" + $(this).data("id");
      $(hide_ele).hide;
      $(show_ele).show;
    });
});

At start,form tag is hidden. On click on any EDIT (ex edit2 of div2) , I want that particular div(ex div2) should disappear and the form should appear AT THE PLACE OF THAT PARTICULAR AREA OF DIV(here, div2).

I would be really thankful if you could help me. TY:)

Answer 1

Please have a look at this running code snippet:

$(function() {
    var par = $('.js_hide_form');
    $(par).hide();
    $('.js_showform').click(function(e) {
      e.preventDefault();
      var hide_ele = "#js_sel" + $(this).data("id");
      var show_ele = "#js_form";
      if($(show_ele).is(":visible"))
        return;
      
      $(".js_hideform").data("id",$(this).data("id"));
      $(hide_ele).hide();
      $(hide_ele).after($(show_ele).detach()); 
      $(show_ele).show();
    });
    $('.js_hideform').click(function(e) {
      e.preventDefault();
      var hide_ele = "#js_form";
      var show_ele = "#js_sel" + $(this).data("id");
      $(hide_ele).hide();
      $(show_ele).show();
      
      
      $("#js_sel3").after($(hide_ele).detach()); //js_sel3 is the id of element after which we want the form should go back
      
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="js_sel1">
    <p> this is selct 1 </p> 
    <a class="js_showform" data-id="1" href="#">edit1</a>
</div>
<div id="js_sel2">
    <p> this is select 2 </p>
    <a class="js_showform" data-id="2" href="#">edit2</a>
</div>
<div id="js_sel3">
    <p> this is select 3 </p>
    <a class="js_showform" data-id="3" href="#">edit3</a>
</div>
<form id="js_form" class="js_hide_form">
    <p> this is my form </p>
    <a class="js_hideform" href="#">save</a>
</form>

Answer 2

Correct your divs and try js:

  <div id="js_sel1">
        <p> this is selct 1 </p> 
        <a class="js_showform" data-id="1" href="#">edit1</a>
    </div>
    <div id="js_sel2">
        <p> this is select 2 </p>
        <a class="js_showform" data-id="2" href="#">edit2</a>
    </div>
    <div id="js_sel3">
        <p> this is select 3 </p>
        <a class="js_showform" data-id="3" href="#">edit3</a>
    </div>
    <form id="js_form" class="js_hide_form">
        <p> this is my form </p>
        <a class="js_hideform" href="#">save</a>
    </form>

js:

     $(function() {
   $('div[id^="js_sel"] .js_showform').on('click',function(){

 var parent = $(this).closest('div[id^="js_sel"]');

 $('#js_form').clone().insertBefore(parent);
 parent.hide();
 parent.prev().show();
});
 $('body').on('click','.js_hide_form a',function(){
 console.log(this);
   $(this).parent().next().show();
   $(this).parent().hide();

});

});

https://jsfiddle.net/9h8r7akt/1/

or:

$(function() {
   $('div[id^="js_sel"] .js_showform').on('click',function(){

 var parent = $(this).closest('div[id^="js_sel"]');

 $('#js_form').detach().insertBefore(parent);
 $('div[id^="js_sel"] ').show();
 parent.hide();
 parent.prev().show();
});
 $('body').on('click','.js_hide_form a',function(){
 console.log(this);
   $('div[id^="js_sel"]').show();
   $(this).parent().hide();

});

});

https://jsfiddle.net/9h8r7akt/3/