id by js？

Question

"div"の "a"を押すと、開きウィンドウは "div"の間にあるはずです。

「id 2」を押すと、「id 1」と「id 3」の間にウィンドウが表示されました。 "id 2"と "id 4"の間に表示されるウィンドウ "id 3"を押した。

$('#add').hide(); 
 
    
 
$('#open_add').click(function() { 
 
     $('#add').show(); 
 
     $('#3').hide(); 
 
    }); 
 
     
 
$('#close_add').click(function() { 
 
     $('#add').hide();  
 
     $('#3').show(); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<div id="add"> 
 
<a href="#" id="close_add">Close add</a> 
 
</div> 
 

 
<div id="1"> 
 
    <p>First</p> 
 
</div> 
 

 
<div id="2"> 
 
    <p>Second</p> 
 
</div> 
 

 
<div id="3"> 
 
    <a href="#" id="open_add">Open add</a> 
 
</div> 
 

 
<div id="4"> 
 
    <p>Fourth</p> 
 
</div> 
 

 
<div id="5"> 
 
    <p>Fifth</p> 
 
</div>

Answer 1

のdivが好き挿入しようと、この例である：[？どうすればjQueryのでHTML要素を移動しない]の

$(document).ready(function(){ 
 
$('div p').click(function() { 
 
$('#add').remove().insertAfter($(this).parent()).show(); 
 
}) 
 
}) 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="add" style="display:none;"> 
 
<a href="#" id="close_add">Close add</a> 
 
</div> 
 
<div id="open_add" style="display:none;"> 
 
<a href="#" id="open_add">Open add</a> 
 
</div> 
 

 
<div id="1"> 
 
    <p>First</p> 
 
</div> 
 

 
<div id="2"> 
 
    <p>Second</p> 
 
</div> 
 

 
<div id="3"> 
 
    <p>Third</p> 
 
</div> 
 

 
<div id="4"> 
 
    <p>Fourth</p> 
 
</div> 
 

 
<div id="5"> 
 
    <p>Fifth</p> 
 
</div>