Develop Reference

Clone <div> and change onclick code of inner button

I have a div with id="add-dependent" including 2 rows and a button (add dependent) inside of the div. When "add dependent" button is clicked, the first row would be cloned and insert before (add dependent) button. Actually I have another button outside of the div called (add applicant) and by clicking it, whole of the div would be cloned and added before (add applicant) button. my code is like this :
let nextLabel=2
let nextId=1
function addApplicant(){
var elem= document.querySelector("#add-dependent");
var clone=elem.cloneNode(true);
var add= document.getElementById("add-applicant");
clone.id = "add-dependent"+nextLabel;
elem.parentElement.insertBefore(clone,add);
var label = clone.querySelector("label");
label.innerHTML = '<button class="close remove" onClick="$(this).parent().parent().parent().parent().remove()">x</button>' + "Applicant " + (nextLabel++) ;
}
function addDependent(){
var elem= document.querySelector(".dependent");
var clone=elem.cloneNode(true);
var add= document.getElementById("dependent");
elem.parentElement.insertBefore(clone,add);
var label=clone.querySelector('label');
label.innerHTML= '<button id="btn" name="btn" type="button" class="close float-left" style="font-size:12px;" onClick="$(this).parent().parent().parent().remove();" >x</button>';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="add-dependent">
<div class="form-row dependents">
<div>
<label class="text-left" contenteditable="true">Applicant 1: </label>
</div>
<div >
<input type="number" placeholder="age">
</div>
</div>
<div class="form-row dependent">
<div>
<button id="btn" name="btn" type="button" class="close " onClick="$(this).parent().parent().remove();" >x</button>
</div>
<div>
<input type="number" placeholder="age">
</div>
</div>
<button id="dependent" onClick="addDependent()">Add dependent</button>
</div>
<button id="add-applicant" onClick="addApplicant()">Add applicant</button>
my problem is when i click on (add dependent) in cloned div, the row is added to main div not cloned one.
hope to here you soon.
Thanks a lot

There are many changes I made to your code and I'll try to explain them here. When you're working with duplicating, appending, removing etc, id's can become difficult to work with - you can't have duplicates of IDs and your code then has to track which id is affected by which button etc.
Its much easier to work with relative paths. For instance when you want to add a dependent, it's easier to say 'find a dependent input to clone and place it inside the container from where I clicked this add-dependent button' - and walla no need for ids. To find the relative div's, I used a combination of event.target, closest() and querySelctor - like this:
e.target
.closest('.add-applicant-container')
.querySelector('.dependents')
.append(clone);
This says Starting from the button I clicked, find the closest '.add-applicant-container' and inside that find the first '.dependents' and place our clone right after that
Finally, the buttons. Because you're creating and destroying these buttons in the process, it's best to set up a listener on document and test to see which button was clicked. This is called event delegation. For the dependent delete button, we only need to find the relative element and delete it so:
if (e.target.classList.contains('close')) {
e.target.closest('.dependent-container').remove()
}
let nextLabel = 2
let nextId = 1
document.addEventListener('click', function(e) {
if (e.target.classList.contains('add-applicant')) {
addApplicant(e)
} else if (e.target.classList.contains('btn-dependent')) {
addDependent(e)
} else if (e.target.classList.contains('remove-applicant')) {
e.target.closest('.add-applicant-container').remove()
} else if (e.target.classList.contains('close')) {
e.target.closest('.dependent-container').remove()
}
})
function addApplicant(e) {
let applicant = document.querySelector('.add-applicant-container')
var clone = applicant.cloneNode(true);
clone.id = "add-dependent" + nextLabel;
clone.querySelectorAll('.dependent-container').forEach((el, i) => {
if (i !== 0) el.remove()
})
applicant.parentElement.insertBefore(clone, e.target);
var label = clone.querySelector("label");
label.innerHTML = '<button class="close remove-applicant">x</button>' + "Applicant " + (nextLabel++);
}
function addDependent(e) {
let dependent = document.querySelector('.dependent-container')
var clone = dependent.cloneNode(true);
e.target.closest('.add-applicant-container').querySelector('.dependents').append(clone);
// var label = clone.querySelector('label');
// label.innerHTML = '<button id="btn" name="btn" type="button" class="close float-left" style="font-size:12px;" >x</button>';
}
.add-applicant-container{
padding:10px;
}
.dependent-container{
padding:5px 0 ;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="add-applicant-container">
<div class="form-row dependents">
<div>
<label class="text-left" contenteditable="true">Applicant 1: </label>
</div>
<div>
<input type="number" placeholder="applicant age">
</div>
</div>
<div class="form-row dependent-container">
<div>
<input type="number" placeholder="dependent age"> <button id="btn" name="btn" type="button" class="close ">x</button>
</div>
</div>
<button class="btn-dependent">Add dependent</button>
</div>
<button class="add-applicant">Add applicant</button>

jquery clone copying form elements twice on button click

I am using jquery clone.
When i click on add button a single clone is created with above fields...upto this clone works fine
But when i click Add button twice it create three copy of clone...it create three copies and like that..
i want when i create add button it just create only one clone every time and when i click remove it remove last clone...
below is my code..
<fieldset id="exercises">
<div class="exercise">
</div>
</fieldset>
<script>
$('#add_exercise').on('click', function() {
$("<div class='exercise address_box'><div class='box'></div></div>").appendTo('#exercises');
$("#toaddress").clone().val("").appendTo(".box");
$("#sender_name").clone().val("").appendTo(".box");
$("#OrderMobileCountryCode").clone().val("").appendTo(".box");
$("#sender_no").clone().val("").appendTo(".box");
$("#presentation").clone().val("").appendTo(".box");
$("<br><button type='button' class='orange_btn' id='add_exercise'>Remove</button>").appendTo('.box');
$("<br>").appendTo('.box');
$("<br>").appendTo('#exercises');
});
$('#exercises').on('click', '.orange_btn', function() {
$(this).closest(".exercise").remove();
});
</script>

Change id of dynamically added button from add_exercise to remove_exercise
$("<br><button type='button' class='orange_btn' id='remove_exercise'>Remove</button>").appendTo('.box');
And change the remove button event as ,
$('#exercises').on('click', '#remove_exercise', function() {
$(this).closest(".exercise").remove();
});
Because your code producing element with same id which in turn triggering events more than once.
Try this modified code,
<script>
$('#add_exercise').on('click', function() {
$("<div class='exercise address_box'><div class='box'></div></div>").appendTo('#exercises');
$("#toaddress").clone().val("").appendTo(".box");
$("#sender_name").clone().val("").appendTo(".box");
$("#OrderMobileCountryCode").clone().val("").appendTo(".box");
$("#sender_no").clone().val("").appendTo(".box");
$("#presentation").clone().val("").appendTo(".box");
$("<br><button type='button' class='orange_btn' id='remove_exercise'>Remove</button>").appendTo('.box');
$("<br>").appendTo('.box');
$("<br>").appendTo('#exercises');
});
$('#exercises').on('click', '#remove_exercise', function() {
$(this).closest(".exercise").remove();
});
</script>

You are using box class to append cloned item to your div. First time its work fine because there is only one div with box class, But in next click there are two div and so on.
Change your add button click listener like this
$('#add_exercise').on('click', function() {
var newDiv = $("<div class='exercise address_box'><div class='box'></div></div>").appendTo('#exercises');
var boxDiv = newDiv.find(".box");
$("#toaddress").clone().val("").appendTo(boxDiv);
$("#sender_name").clone().val("").appendTo(boxDiv);
$("#OrderMobileCountryCode").clone().val("").appendTo(boxDiv);
$("#sender_no").clone().val("").appendTo(boxDiv);
$("#presentation").clone().val("").appendTo(boxDiv);
$("<br><button type='button' class='orange_btn' id='add_exercise'>Remove</button>").appendTo(boxDiv);
$("<br>").appendTo(boxDiv);
$("<br>").appendTo('#exercises');
});
EDIT
I added a code snippet here it work fine. I use red boder for box class and black border for addres_box class.
$('#add_exercise').on('click', function() {
var newDiv = $("<div class='exercise address_box'><div class='box'></div></div>").appendTo('#exercises');
var boxDiv = newDiv.find(".box");
$("#toaddress").clone().val("").appendTo(boxDiv);
$("#sender_name").clone().val("").appendTo(boxDiv);
$("#OrderMobileCountryCode").clone().val("").appendTo(boxDiv);
$("#sender_no").clone().val("").appendTo(boxDiv);
$("#presentation").clone().val("").appendTo(boxDiv);
$("<br><button type='button' class='orange_btn' id='add_exercise'>Remove</button>").appendTo(boxDiv);
$("<br>").appendTo(boxDiv);
$("<br>").appendTo('#exercises');
});
$('#exercises').on('click', '.orange_btn', function() {
$(this).closest(".exercise").remove();
});
.address_box{
padding:10px;
border:1px solid #000;
}
.box{
border:1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="itemsto-clone">
<input id="toaddress" value="" name="sender_name">
<input id="sender_name" value="" name="sender_name">
<input id="OrderMobileCountryCode" value="" name="sender_name">
<input id="sender_no" value="" name="sender_name">
<input id="presentation" value="" name="presentation">
<div>
<fieldset id="exercises">
<div class="exercise">
</div>
</fieldset>
<button id="add_exercise">Add Exercise</button>

You create duplicate class name 'box' and you keep appendTo('.box')
So they just append it to all '.box' class
change your script to this
$('#add_exercise').on('click', function() {
$("<div class='exercise address_box'><div class='box'></div></div>").appendTo('.test');
var lastbox = $(".box").last();
$("#toaddress").clone().val("").appendTo(lastbox);
$("#sender_name").clone().val("").appendTo(lastbox);
$("#OrderMobileCountryCode").clone().val("").appendTo(lastbox);
$("#sender_no").clone().val("").appendTo(lastbox);
$("#presentation").clone().val("").appendTo(lastbox);
$("<br><button type='button' class='orange_btn' id='add_exercise'>Remove</button>").appendTo(lastbox);
$("<br>").appendTo(lastbox);
$("<br>").appendTo('#exercises');
});
$('#exercises').on('click', '.orange_btn', function() {
$(this).closest(".exercise").remove();
});

Since question is not very clear, here is the way to implement your requirement of cloning elements.
var counter = (function(){
var counter = 1;
return function(){
return counter++;
}
})();
$('#add_exercise').on('click', function() {
var clone = $('#exercises div.exercise:eq(0)').clone();
clone.find('[id]').each(function(i,c){
$(c).attr('id', $(c).attr('id') + counter());
$(c).attr('placeholder', $(c).attr('id'));
});
$('#exercises').append(clone)
});
$('#remove_exercise').on('click', function() {
if($('#exercises div.exercise').length !=1)
$('#exercises div.exercise:last').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button id="add_exercise">Add</button>
<button id="remove_exercise">Remove</button>
</div>
<div id="exercises">
<div class="exercise">
<input id="myId" placeholder="my id" />
<input placeholder="input with no id" />
</div>
</div>

is it possible to hide div when another button is click?

I am trying to hide the div's when different buttons are clicked but I don't know how to. (So when 'Test 1' is clicked it should hide 'Test 2' Div and vice versa) I checked here and on Google but couldn't find an answer for it.
Javascript :
function showHide(divId) {
var theDiv = document.getElementById(divId);
if (theDiv.style.display == "none") {
theDiv.style.display = "";
} else {
theDiv.style.display = "none";
}
}
HTML :
<input type="button" onclick="showHide('hidethis')" value="Test It">
<div id="hidethis" style="display:none">
<h1>TEST ME!</h1>>
</div>
<input type="button" onclick="showHide('hidethis2')" value="Test It 2">
<div id="hidethis2" style="display:none">
<h1>TEST MEEEEEEEEEEEEEEE 2!</h1>
</div>
JSFIDDLE: is not doing it here but works locallyhttp://jsfiddle.net/S5JzK/

<input type="button" onclick="showHide('hidethis')" value="Test It" />
<div id="hidethis" style="display:none">
<h1>TEST ME!</h1>
</div>
<input type="button" onclick="showHide('hidethis2')" value="Test It 2">
<div id="hidethis2" style="display:none">
<h1>TEST MEEEEEEEEEEEEEEE 2!</h1>
</div>
function showHide(divId) {
$("#"+divId).toggle();
}
Check the Fiddle http://jsfiddle.net/S5JzK/7/

Please try this, it works well and so simple,
<html>
<head>
<style>
.manageDiv{
display:none;
}
</style>
</head>
<body>
<input type="button" class="testButton" value="Test It" />
<input type="button" class="testButton" value="Test It 2" />
<div id="hidethis2" class="manageDiv">
<h1>TEST MEEEEEEEEEEEEEEE 2!</h1>
</div>
</body>
</html>
$(function(){
$(".testButton").on("click", function(){
$("#hidethis2").toggleClass("manageDiv");
});
});

To it work in fiddle, in your example, you need to select (No wrap - in head) on the left.
Look the example below, using pure javascript:
HTML
<input type="button" onclick="showHide('hidethis')" value="Test It">
<div id="hidethis" style="display:none">
<h1>TEST ME!</h1>
</div>
<input type="button" onclick="showHide('hidethis2')" value="Test It 2">
<div id="hidethis2" style="display:none">
<h1>TEST MEEEEEEEEEEEEEEE 2!</h1>
</div>
JAVASCRIPT
function showHide(divId) {
/* Hide all divs */
var elements = document.getElementsByTagName('div');
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = "none";
}
/* Set display */
var theDiv = document.getElementById(divId);
theDiv.style.display = "";
}
http://jsfiddle.net/S5JzK/9/
ANOTHER JAVASCRIPT EXAMPLE
function showHide(divId) {
/* Hide the divs that you want */
var div1 = document.getElementById('#hidethis');
var div2 = document.getElementById('#hidethis2');
div1.style.display = "none";
div2.style.display = "none";
/* Set display */
var theDiv = document.getElementById(divId);
theDiv.style.display = "";
}

Using JQuery:
function showHideDiv(divId, bShow) {
if (bShow) {
$("#" + divId).show();
} else {
$("#" + divId).hide();
}
}

your code seems fine. are you sure you enter the function upon click? try adding a breakpoint using developer tools or an alert.
Anyways, I see you tagged this post with jquery. you can you it to do the task more elegantly.
$("#" + theDiv).hide();
or for showing it:
$("#" + theDiv).show();

"JSFIDDLE: is not doing it here but works locally"
Yes, because by default jsfiddle wraps your JS in an onload handler, which means the function declaration is local to that handler. Inline html attribute event handlers like your onclick="showHide('hidethis')" can only call global functions.
Under jsfiddle's Frameworks & Extensions heading there's a drop-down where you can change the default "onload" to "No wrap - in head" (or "No wrap - in body"). That'll make your function declaration global as in your local implementation.
Demo: http://jsfiddle.net/S5JzK/8/

change displayed div with Javascript

I've been trying to get this to work and thought it would be relatively easy but i'm just unable to target my div's with javascript.
I want a list of boxes and each one will be clickable and each one has a buddy which is hidden. when you click a , it hides and shows its buddy which will have an input box. Type the text in you need and press ok and it changes back to it's original displaying the text you have entered.
the head contains the following:
<head>
<script language="javascript">
var state = 'none';
function showhide(layer_ref) {
if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
</script>
And then my HTML contains:
<div id="div0">
<a href="#" onclick="showhide('div1');" style="text-decoration:none;">
<div style="width:200px; height:30px; background-color:grey;color:white">
Input: <div id="showinput"></div>
</div>
</a>
</div>
<div id="div1" style="display:none;">
<div style="width:200px; height:30px; background-color:grey;color:white">
<input type="text id="addInput" /">
<input type="submit" value="submit" name="submit" onclick="showhide('div1');" />
</div>
</div>
I'm trying to add the following but it just won't update the original and the script just makes the buddy div show below the original. How can i hide the original at the same time?
var myobj = document.getElementById("addInput");
var mytext = myobj.value;
document.getElementById("showinput").innerHTML = mytext;

You are missing a closing quote around type="text so the input id is not set. Try:
<input type="text" id="addInput" />

Hide Button After Click (With Existing Form on Page)

I am trying to hide a button (not inside form tags) after it has been clicked. Below is the existing code. All solutions I have tried either break the functionality or interfere with the form on the page.
The content between the DIV hidden-dev tags is hidden until the button near the bottom of the code is clicked. Once that button is clicked, all of the remaining content is shown to the user.
Once the content is shown, there is no use for the button "Check Availability" so I would like to hide it (especially because the submit button appears for the core form, and it is confusing to see both at the bottom of the full length page.
Here's the existing code that does everything properly (except hide the button after the click)...
<html>
<head>
<style>
.hidden-div {
display:none
}
</style>
</head>
<body>
<div class="reform">
<form id="reform" action="action.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="type" value="" />
<fieldset>
content here...
</fieldset>
<div class="hidden-div" id="hidden-div">
<fieldset>
more content here that is hidden until the button below is clicked...
</fieldset>
</form>
</div>
<span style="display:block; padding-left:640px; margin-top:10px;">
<button onclick="getElementById('hidden-div').style.display = 'block'">Check Availability</button>
</span>
</div>
</body>
</html>

Change the button to :
<button onclick="getElementById('hidden-div').style.display = 'block'; this.style.display = 'none'">Check Availability</button>
FIDDLE
Or even better, use a proper event handler by identifying the button :
<button id="show_button">Check Availability</button>
and a script
<script type="text/javascript">
var button = document.getElementById('show_button')
button.addEventListener('click',hideshow,false);
function hideshow() {
document.getElementById('hidden-div').style.display = 'block';
this.style.display = 'none'
}
</script>
FIDDLE

This is my solution. I Hide and then confirm check
onclick="return ConfirmSubmit(this);" />
function ConfirmSubmit(sender)
{
sender.disabled = true;
var displayValue = sender.style.
sender.style.display = 'none'
if (confirm('Seguro que desea entregar los paquetes?')) {
sender.disabled = false
return true;
}
sender.disabled = false;
sender.style.display = displayValue;
return false;
}

Here is another solution using Jquery I find it a little easier and neater than inline JS sometimes.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
/* if you prefer to functionize and use onclick= rather then the .on bind
function hide_show(){
$(this).hide();
$("#hidden-div").show();
}
*/
$(function(){
$("#chkbtn").on('click',function() {
$(this).hide();
$("#hidden-div").show();
});
});
</script>
<style>
.hidden-div {
display:none
}
</style>
</head>
<body>
<div class="reform">
<form id="reform" action="action.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="type" value="" />
<fieldset>
content here...
</fieldset>
<div class="hidden-div" id="hidden-div">
<fieldset>
more content here that is hidden until the button below is clicked...
</fieldset>
</form>
</div>
<span style="display:block; padding-left:640px; margin-top:10px;"><button id="chkbtn">Check Availability</button></span>
</div>
</body>
</html>

CSS code:
.hide{
display:none;
}
.show{
display:block;
}
Html code:
<button onclick="block_none()">Check Availability</button>
Javascript Code:
function block_none(){
document.getElementById('hidden-div').classList.add('show');
document.getElementById('button-id').classList.add('hide');
}

You can use this
Html
<button class="btn-plus" onclick="afficherTexte(<?php echo $u["id"]."2" ?>,event)">+</button>
Java script
function afficherTexte(id,event){
var x = document.getElementById(id);
x.style.display = "block";
event.target.style.display = "none";
}