Несколько окон div при нажатии кнопки

Question

Я не мог правильно записать заголовок. Но вопрос в том, что я работаю над формой заявки, которая просит пользователя ввести адрес. Я сохранил адрес1 и address2 в двух отдельных div, где мой адрес2 скрыт. При нажатии кнопки address2 div открывается кнопка для address1 div. В address2 есть еще две кнопки при нажатии «ADD», должна открыться копия клонирования address2, и при нажатии «REMOVE» div должен скрываться. Проблема в том, что я могу ADD и REMOVE div.but, когда я нажал кнопку ADD для адреса2, появилось много окон. Мне нужно только одно, чтобы всплывать как пользовательское требование.

До сих пор я могу написать этот код. Скажите мне, где я иду не так. код ниже

</div> 
<div class="div1 target">Address 
<div> 
Primary<span class="red">*</span> <input type="text" placeholder="Address 1" id="add1" name="add1" required/> 

</div> 
<div> 
City<span class="red">*</span> 
<input type="text" placeholder="City" id="city" name="city" required/> 
</div> 


<div> 
Country<span class="red">*</span> 

<select name="country" id="country"> 
<option selected="selected" value=""> Choose Country </option> 
<option id="coun1" value="coun1">Country1</option> 
<option id="coun2" value="coun2">Country2</option> 
<option id="coun3" value="coun3">Country3</option> 
<option id="coun4" value="coun4">Country4</option> 
</select> 
State<span class="red">*</span> 
<select name="state" id="state"> 
<option selected="selected" value=""> Choose State </option> 
<option class="st1" value="st1">State1</option> 
<option class="st1" value="st1">State2</option> 
<option class="st1" value="st1">State3</option> 
<option class="st1" value="st1">State4</option> 
<option class="st2" value="st2">State5</option> 
<option class="st2" value="st2">State6</option> 
<option class="st2" value="st2">State7</option> 
<option class="st2" value="st2">State8</option> 
<option class="st3" value="st3">State9</option> 
<option class="st3" value="st3">State10</option> 
<option class="st3" value="st3">State11</option> 
<option class="st3" value="st3">State12</option> 
<option class="st4" value="st4">State13</option> 
<option class="st4" value="st4">State14</option> 
<option class="st4" value="st4">State15</option> 
<option class="st4" value="st4">State16</option> 
</select> 

</div> 

<div>Zip/Postal Code<span class="red">*</span> 
<input type="text" placeholder="Zip/Postal" id="zpc" name="zpc" required/> 
</div> 
<input type="button" value="add" id="add0"/> 
</div> 



<div class="div3 target" style="display:none">Address 
<div> 
Primary<span class="red">*</span> <input type="text" placeholder="Address 1" id="add1" name="add1"   required/> 

</div> 
<div> 
City<span class="red">*</span> 
<input type="text" placeholder="City" id="city" name="city" required/> 
</div> 


<div> 
Country<span class="red">*</span> 

<select name="country" id="country"> 
<option selected="selected" value=""> Choose Country </option> 
<option id="coun1" value="coun1">Country1</option> 
<option id="coun2" value="coun2">Country2</option> 
<option id="coun3" value="coun3">Country3</option> 
<option id="coun4" value="coun4">Country4</option> 
</select> 
State<span class="red">*</span> 
<select name="state" id="state"> 
<option selected="selected" value=""> Choose State </option> 
<option class="st1" value="st1">State1</option> 
<option class="st1" value="st1">State2</option> 
<option class="st1" value="st1">State3</option> 
<option class="st1" value="st1">State4</option> 
<option class="st2" value="st2">State5</option> 
<option class="st2" value="st2">State6</option> 
<option class="st2" value="st2">State7</option> 
<option class="st2" value="st2">State8</option> 
<option class="st3" value="st3">State9</option> 
<option class="st3" value="st3">State10</option> 
<option class="st3" value="st3">State11</option> 
<option class="st3" value="st3">State12</option> 
<option class="st4" value="st4">State13</option> 
<option class="st4" value="st4">State14</option> 
<option class="st4" value="st4">State15</option> 
<option class="st4" value="st4">State16</option> 
</select> 

</div> 

<div>Zip/Postal Code<span class="red">*</span> 
<input type="text" placeholder="Zip/Postal" id="zpc" name="zpc" required/> 
</div> 
<input type="button" value="add" id="add"/> 
<input type="button" value="remove" id="remove"/> 
</div> 

$(document).ready(function(){ 
$("#add0").click(function(e){ 
    $(".div1").after($(".div3").show()); 
    e.preventDefault(); 
}); 
}); 
$(document).ready(function(){ 
$("#add").click(function(e){ 
    $(".div3").clone(true).insertBefore($(".div3")); 
}); 
$("#remove").click(function(e){ 
    $(this).closest(".div3").hide(); 

}); 
e.preventDefault(); 
}); 

Answer 1

было две ошибки первых: при вставке .div3 дважды там уже два .div3 и при нажатии кнопки добавить вставляет их обоих, вы должны использовать последний(), чтобы избежать этого , Вторая ошибка: insertBefore ($ (". Div3")) вставляет .div3 перед всеми тегами .div3, чтобы избежать этого использования, должен использовать last() снова, теперь он выглядит так: $ (". Div3"). Last(). клон (правда) .insertBefore ($ (»div3" .) в прошлом().); этот код внизу вы можете использовать

<!doctype html> 
<html> 
<head> 
<title></title> 
<style> 

</style> 
<script src="http://code.jquery.com/jquery-1.11.1.js"></script> 
</head> 
<body> 
<div class="div1 target">Address 
<div> 
Primary<span class="red">*</span> <input type="text" placeholder="Address 1" id="add1" name="add1" required/> 

</div> 
<div> 
City<span class="red">*</span> 
<input type="text" placeholder="City" id="city" name="city" required/> 
</div> 


<div> 
Country<span class="red">*</span> 

<select name="country" id="country"> 
<option selected="selected" value=""> Choose Country </option> 
<option id="coun1" value="coun1">Country1</option> 
<option id="coun2" value="coun2">Country2</option> 
<option id="coun3" value="coun3">Country3</option> 
<option id="coun4" value="coun4">Country4</option> 
</select> 
State<span class="red">*</span> 
<select name="state" id="state"> 
<option selected="selected" value=""> Choose State </option> 
<option class="st1" value="st1">State1</option> 
<option class="st1" value="st1">State2</option> 
<option class="st1" value="st1">State3</option> 
<option class="st1" value="st1">State4</option> 
<option class="st2" value="st2">State5</option> 
<option class="st2" value="st2">State6</option> 
<option class="st2" value="st2">State7</option> 
<option class="st2" value="st2">State8</option> 
<option class="st3" value="st3">State9</option> 
<option class="st3" value="st3">State10</option> 
<option class="st3" value="st3">State11</option> 
<option class="st3" value="st3">State12</option> 
<option class="st4" value="st4">State13</option> 
<option class="st4" value="st4">State14</option> 
<option class="st4" value="st4">State15</option> 
<option class="st4" value="st4">State16</option> 
</select> 

</div> 

<div>Zip/Postal Code<span class="red">*</span> 
<input type="text" placeholder="Zip/Postal" id="zpc" name="zpc" required/> 
</div> 
<input type="button" value="add" id="add0"/> 
</div> 



<div class="div3 target" style="display:none">Address 
<div> 
Primary<span class="red">*</span> <input type="text" placeholder="Address 1" id="add1" name="add1"   required/> 

</div> 
<div> 
City<span class="red">*</span> 
<input type="text" placeholder="City" id="city" name="city" required/> 
</div> 


<div> 
Country<span class="red">*</span> 

<select name="country" id="country"> 
<option selected="selected" value=""> Choose Country </option> 
<option id="coun1" value="coun1">Country1</option> 
<option id="coun2" value="coun2">Country2</option> 
<option id="coun3" value="coun3">Country3</option> 
<option id="coun4" value="coun4">Country4</option> 
</select> 
State<span class="red">*</span> 
<select name="state" id="state"> 
<option selected="selected" value=""> Choose State </option> 
<option class="st1" value="st1">State1</option> 
<option class="st1" value="st1">State2</option> 
<option class="st1" value="st1">State3</option> 
<option class="st1" value="st1">State4</option> 
<option class="st2" value="st2">State5</option> 
<option class="st2" value="st2">State6</option> 
<option class="st2" value="st2">State7</option> 
<option class="st2" value="st2">State8</option> 
<option class="st3" value="st3">State9</option> 
<option class="st3" value="st3">State10</option> 
<option class="st3" value="st3">State11</option> 
<option class="st3" value="st3">State12</option> 
<option class="st4" value="st4">State13</option> 
<option class="st4" value="st4">State14</option> 
<option class="st4" value="st4">State15</option> 
<option class="st4" value="st4">State16</option> 
</select> 

</div> 

<div>Zip/Postal Code<span class="red">*</span> 
<input type="text" placeholder="Zip/Postal" id="zpc" name="zpc" required/> 
</div> 
<input type="button" value="add" id="add"/> 
<input type="button" value="remove" id="remove"/> 
</div> 

<script > 
$(document).ready(function(){ 
$("#add0").click(function(e){ 
    $(".div3").show(); 
    e.preventDefault(); 
}); 
}); 
$(document).ready(function(){ 
$("#add").click(function(e){ 
    $(".div3").last().clone(true).insertBefore($(".div3").last()); 
}); 
$("#remove").click(function(e){ 
    if($(".div3").length!=1){ 
     $(this).closest(".div3").remove(); 
    } 
    else{ 
     $(this).closest(".div3").hide(); 
    } 
}); 
e.preventDefault(); 
}); 
</script> 
</body> 
</html>