I need some help displaying a div with a form inside of it whenever someone selects a certain option from a tag. My code is this:
<script type="text/javascript">
$(function() {
$('#contactOptionSelect').change(function() {
$('.emailForm').hide();
$('#' + $(this).val()).show();
});
});
</script>
<div class="contactSelect" id="contactOptionSelect">
<label for="selectContact">Contact us: </label>
<select name="selectContact" class="selectContactType" style="width: 150px;"/>
<option class="opt" value="">Please select</option>
<option class="opt" id="helpOpt" value="">Help and Support</option>
<option class="opt" id="emailOpt" value="">Email</option>
<option class="opt" id="visitOpt" value="">Visit us!</option>
<option class="opt" id="phoneOpt" value="">Phone</option>
</select>
</div>
<div class="emailForm" id="emailFormId">
<form id="contactUsForm" method="post" action="">
<div class="formSubject">
<label for="inputSubject">Subject</label>
<input type="text" width="50px" id="inputSubject" />
</div>
<div class="formBody">
<label for="inputBody">Email</label>
<textarea rows="15" cols="50" id="inputBody"></textarea>
</div>
<div class="formSubmit">
<input type="submit" id="inputSubmit" value="Send!"/>
</div>
</form>
</div>
And I want to display the last form when the email option is selected. I kinda want it to work like this: http://www.apple.com/privacy/contact/ High standards I know but whatever haha Thanks in advance for any help!
Are you looking for something like this? http://jsbin.com/okakuy/edit#javascript,html
Whenever the select option is changed, we hide whichever div is visible, and show whichever div has the current select value as its id attribute.
$("#parts").on("change", function(o){
$(".panels")
.find("> div:visible")
.slideUp()
.end()
.find("#" + o.target.value)
.slideDown();
});
Coupled with this markup:
<select id="parts">
<option>foo1</option>
<option>foo2</option>
<option>foo3</option>
</select>
<div class="panels">
<div id="foo1">This is foo1</div>
<div id="foo2">This is foo2</div>
<div id="foo3">This is foo3</div>
</div>
Related
<div class="wcpa_form_item wcpa_type_checkbox-group wcpa_form_id_9547 eye_od_parent wcpa-col-2 wcpa_validate_field " id="wcpa-checkbox-group-1661439693440" data-type="checkbox-group">
<div class="checkbox-group eye_od "data-validation="{"label":"checkbox-group-1661439693440"}">
<div class="wcpa_checkbox">
<input name="checkbox-group-1661439693440[0]" id="checkbox-group-1661439693440_3_0" value="occhio-destro" type="checkbox" checked="checked">
<label for="checkbox-group-1661439693440_3_0">
<span class="wcpa_check"></span>Occhio Destro</label>
</div>
</div>
</div>
<div class="wcpa_form_item wcpa_type_select wcpa_form_id_9547 gradazione_os_od_parent wcpa-col-2 wcpa_validate_field " id="wcpa-select-1661440462701" data-type="select">
<label for="select-1661440462700">gradazione OD<span class="required_ast">*</span></label>
<div class="select">
<select name="select-1661440462700" class="gradazione_os_od " required="required" data-validation="{"label":"gradazione OD","required":true,"requiredMessage":"Field is required"}">
<option value="">- scegli -</option>
<option value="-0.25">-0.25</option>
<option value="-0.50">-0.50</option>
<option value="-0.75">-0.75</option>
<option value="-1.00">-1.00</option>
<div class="select_arrow"></div>
</select>
</div>
</div>
i'm just starting to work with javascript i'm trying them all but i can't modify this function, i need that when i deselect the "right eye" checkbox the select is disabled, unfortunately it's a wordpress plugin that allows you to do this operation only with show and hide but i need to disable, can someone help me please i'm really trying them all with null results, i'm looking for them online and all the ones i try are definitely not working i'm wrong something. thanks
I don't know how you could inject js code to your wordpress plugins but the basic code for this purpose goes like this. Make sure the id you are passing to the checkbox is unique.
function check()
{
if (document.getElementById('myCheckbox').checked)
{
document.getElementById("mySelect").disabled = false;
} else {
document.getElementById("mySelect").disabled = true;
}
}
<div class="wcpa_form_item wcpa_type_checkbox-group wcpa_form_id_9547 eye_od_parent wcpa-col-2 wcpa_validate_field " id="wcpa-checkbox-group-1661439693440" data-type="checkbox-group">
<div class="checkbox-group eye_od "data-validation="{"label":"checkbox-group-1661439693440"}">
<div class="wcpa_checkbox">
<input name="checkbox-group-1661439693440[0]" id="myCheckbox" value="occhio-destro" type="checkbox" checked="checked" onclick="check()">
<label for="checkbox-group-1661439693440_3_0">
<span class="wcpa_check"></span>Occhio Destro</label>
</div>
</div>
</div>
<div class="wcpa_form_item wcpa_type_select wcpa_form_id_9547 gradazione_os_od_parent wcpa-col-2 wcpa_validate_field " id="wcpa-select-1661440462701" data-type="select">
<label for="select-1661440462700">gradazione OD<span class="required_ast">*</span></label>
<div class="select">
<select id='mySelect' name="select-1661440462700" class="gradazione_os_od " required="required" data-validation="{"label":"gradazione OD","required":true,"requiredMessage":"Field is required"}">
<option value="">- scegli -</option>
<option value="-0.25">-0.25</option>
<option value="-0.50">-0.50</option>
<option value="-0.75">-0.75</option>
<option value="-1.00">-1.00</option>
<div class="select_arrow"></div>
</select>
</div>
</div>
<html>
<head><title>disable "select" when the checkbox is unchecked</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="wcpa_form_item wcpa_type_checkbox-group wcpa_form_id_9547 eye_od_parent wcpa-col-2 wcpa_validate_field " id="wcpa-checkbox-group-1661439693440" data-type="checkbox-group">
<div class="checkbox-group eye_od "data-validation="{"label":"checkbox-group-1661439693440"}">
<div class="wcpa_checkbox">
<input name="checkbox-group-1661439693440[0]" id="myCheckbox" value="occhio-destro" type="checkbox" checked="checked">
<label for="checkbox-group-1661439693440_3_0">
<span class="wcpa_check"></span>Occhio Destro</label>
</div>
</div>
</div>
<div class="wcpa_form_item wcpa_type_select wcpa_form_id_9547 gradazione_os_od_parent wcpa-col-2 wcpa_validate_field " id="wcpa-select-1661440462701" data-type="select">
<label for="select-1661440462700">gradazione OD<span class="required_ast">*</span></label>
<div class="select">
<select id='mySelect' name="select-1661440462700" class="gradazione_os_od " required="required" data-validation="{"label":"gradazione OD","required":true,"requiredMessage":"Field is required"}">
<option value="">- scegli -</option>
<option value="-0.25">-0.25</option>
<option value="-0.50">-0.50</option>
<option value="-0.75">-0.75</option>
<option value="-1.00">-1.00</option>
<div class="select_arrow"></div>
</select>
</div>
</div>
<script>
$('#myCheckbox').on('change', function(event){
if($(this).prop("checked") == true)
{
$("#mySelect").prop('disabled',false);
}
else
{
$("#mySelect").prop('disabled',true);
}
});
</script>
</body>
</html>
This adds the ID's and event dynamically
var checkbox = $("input[type=checkbox]");
$(checkbox).attr('id', 'myCheckbox');
var select = $(".gradazione_os_od")[0];
$(select).attr('id', 'mySelect');
console.log(select);
function check(){
if ($('#myCheckbox').prop("checked"))
{
$("#mySelect").prop("disabled", false);
} else {
$("#mySelect").prop("disabled", true);
}
}
$('#myCheckbox').on( "change", function() {
check();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wcpa_form_item wcpa_type_checkbox-group wcpa_form_id_9547 eye_od_parent wcpa-col-2 wcpa_validate_field " id="wcpa-checkbox-group-1661439693440" data-type="checkbox-group">
<div class="checkbox-group eye_od "data-validation="{"label":"checkbox-group-1661439693440"}">
<div class="wcpa_checkbox">
<input name="checkbox-group-1661439693440[0]" id="checkbox-group-1661439693440_3_0" value="occhio-destro" type="checkbox" checked="checked">
<label for="checkbox-group-1661439693440_3_0">
<span class="wcpa_check"></span>Occhio Destro</label>
</div>
</div>
</div>
<div class="wcpa_form_item wcpa_type_select wcpa_form_id_9547 gradazione_os_od_parent wcpa-col-2 wcpa_validate_field " id="wcpa-select-1661440462701" data-type="select">
<label for="select-1661440462700">gradazione OD<span class="required_ast">*</span></label>
<div class="select">
<select name="select-1661440462700" class="gradazione_os_od " required="required" data-validation="{"label":"gradazione OD","required":true,"requiredMessage":"Field is required"}">
<option value="">- scegli -</option>
<option value="-0.25">-0.25</option>
<option value="-0.50">-0.50</option>
<option value="-0.75">-0.75</option>
<option value="-1.00">-1.00</option>
<div class="select_arrow"></div>
</select>
</div>
</div>
They are both valid solutions because I see that they work here but not on my page.
I answer the reflection on how I can insert javascript in a plugin ... Actually not directly in the plugin, but in the functions.php page in the child theme, through a script that I found online I can insert the javascript in the header or in the footer that communicates with the plugin, in fact I had found a script to try to enable the checkboxes inside the plugin when reloading the page and it worked so it can be done, but what you wrote for me does not take them, it does not assign me the id inside the elements and therefore the script does not work.
For each element in my database, I am creating a separate thumbnail to display. I have a dropdown menu, and depending on the user's selection I want to show a different form using a function, but the function only works on the first element in the page. When I make a selection on the second, third element, the selection affects the first element and not its corresponding element. How can I solve this such that when I make a selection on the first element, it affects the first element, a selection on the second element affects the second element and so on? My code looks something like this at the moment (in the example below the elements are hard-coded, but in my actual code the elements come from a database and are displayed in a loop):
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<h1>First element</h1>
<label for="type">Make a selection:</label>
<select id="tipo" onchange="choose(this);">
<option value="" selected disabled>Please select</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<div class="thumbnail hidden" id="option1">
<h3>This is option 1</h3>
<form action='/option1' method="POST">
<input name="number" type="number" required>
<input name="text" type="text" required>
<button type="submit">Send</button>
</form>
</div>
<div class="thumbnail hidden" id="option2">
<h3>This is option 2</h3>
<form action='/option2' method="POST">
<input name="number" type="number" required>
<input name="text" type="text" required>
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<h1>Second element</h1>
<label for="type">Make a selection:</label>
<select id="tipo" onchange="choose(this);">
<option value="" selected disabled>Please select</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<div class="thumbnail hidden" id="option1">
<h3>This is option 1</h3>
<form action='/option1' method="POST">
<input name="number" type="number" required>
<input name="text" type="text" required>
<button type="submit">Send</button>
</form>
</div>
<div class="thumbnail hidden" id="option2">
<h3>This is option 2</h3>
<form action='/option2' method="POST">
<input name="number" type="number" required>
<input name="text" type="text" required>
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
<script type="text/javascript">
function choose(that) {
if (that.value == "option1") {
document.getElementById("option1").style.display = "block";
document.getElementById("option2").style.display = "none";
} else {
document.getElementById("option1").style.display = "none";
document.getElementById("option2").style.display = "block";
}
}
</script>
I already tried using a jquery each() loop but to no avail. I tried jquery by adding a class to the parent div in each element, and wrapping my current function in a $('.newClass').each(function choose(that){...});.
I also tried getting all the elements with the new class in the parent div, and then looping through them and calling the current function in each iteration but that didn't work. Something like:let elements = document.querySelectorAll('.newClass'); and then for(let i = 0; ...){function choose(that){...}}.
I have also tried not using loops, but instead, use jquery to get the next element of a certain class, and use classes instead of ids in my code. I think this is the best approach but I cannot get it to work. My new function that uses classes instead of ids looks like:
function choose(that) {
if (that.value == "option1") {
$(this).closest('.option1').style.display = "block";;
$(this).closest('.option2').style.display = "none";
} else {
$(this).closest('.option1').style.display = "none";
$(this).closest('.option2').style.display = "block";
}
}
Please help, how can I get this to work?
The mistake was duplicated id attributes. What I've done was prefixing them based on the section-name:
first-section-option1
first-section-option2
second-section-option1
second-section-option2
and used CSS attribute selector, targeting sibling with id ending with desired option index:
[id$="option1"]
I also prefixed the select's id attributes, but it's irrelevant.
Working example below:
function choose(that) {
var $select = $(that);
if (that.value == "option1") {
$select.siblings('[id$=option1]').show();
$select.siblings('[id$=option2]').hide();
} else {
$select.siblings('[id$=option2]').show();
$select.siblings('[id$=option1]').hide();
}
}
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<h1>First element</h1>
<label for="first-element-tipo">Make a selection:</label>
<select id="first-element-tipo" onchange="choose(this);">
<option value="" selected disabled>Please select</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<div class="thumbnail hidden" id="first-element-option1">
<h3>This is option 1</h3>
<form action='/option1' method="POST">
<input name="number" type="number" required>
<input name="text" type="text" required>
<button type="submit">Send</button>
</form>
</div>
<div class="thumbnail hidden" id="first-element-option2">
<h3>This is option 2</h3>
<form action='/option2' method="POST">
<input name="number" type="number" required>
<input name="text" type="text" required>
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<h1>Second element</h1>
<label for="second-element-tipo">Make a selection:</label>
<select id="second-element-tipo" onchange="choose(this);">
<option value="" selected disabled>Please select</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<div class="thumbnail hidden" id="second-element-option1">
<h3>This is option 1</h3>
<form action='/option1' method="POST">
<input name="number" type="number" required>
<input name="text" type="text" required>
<button type="submit">Send</button>
</form>
</div>
<div class="thumbnail hidden" id="second-element-option2">
<h3>This is option 2</h3>
<form action='/option2' method="POST">
<input name="number" type="number" required>
<input name="text" type="text" required>
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
<script type="text/javascript">
</script>
I have a form built with semantic-ui and I need to make a few fields appear conditionally, in case a specified selection is made.
Here's the html code:
<div class="field">
<label>Pay Mode</label>
<div class="ui selection dropdown" id="paymode">
<input type='hidden' name='pay_mode'>
<i class="dropdown icon"></i>
<div class="default text">Pay Mode</div>
<div class="menu">
<div class="item" data-value="free">Free</div>
<div class="item" data-value="stand alone">Stand alone</div>
<div class="item" data-value="central system">Central System</div>
</div>
</div>
</div>
<div class="conditional">
<div class='three fields'>
<div class='field'>
<label>A1</label>
<input
type='text'
name='a1'
value=''
required
/>
</div>
<div class='field'>
<label>A2</label>
<input
type='text'
name='a2'
value=''
required
/>
...
So basically, the condition is the Pay Mode. The class "conditional" only has to show up if "Stand alone" is selected at Pay Mode.
Here's my js file:
$('.conditional').hide();
$('#paymode').change(function () {
var selected = $('#paymode item:selected').text();
$('.conditional').toggle(selected == "Stand alone");
});
This successful hides the conditional class, but the same class does not show up even if Stand alone is selected as an option.
What is wrong with this code? Many thanks!
I found a solution.
Slightly modify the Pay Mode dropdown field like this:
<div class="field">
<label>Pay Mode</label>
<select name="pay_mode" class="ui fluid dropdown" id="condition">
<option value="">Pay Mode</option>
<option value="free">Free</option>
<option value="stand alone">Stand alone</option>
<option value="central system">Central System</option>
</select>
</div>
And the js file like this:
$('.conditional').hide();
$('#condition').change(function () {
var selected = $('#condition option:selected').text();
$('.conditional').toggle(selected == "Stand alone");
});
it works like a charm!
I have html with several drop downs. Depending on the each selection a textarea shows for description. Right now I have a show and hide in javascript for each question. Is there a way to concise this so that I dont have to write show/hide for each question. What I mean is, Is there a way that my javascript will be more concise?
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Food Selection</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#spicyFoodField').on('change', function() {
if (this.value == 'spicyFoodDesc') {
$("#spicyFoodDesc").show();
} else {
$("#spicyFoodDesc").hide();
}
});
});
$(document).ready(function() {
$('#sweetFoodField').on('change', function() {
if (this.value == 'sweetFoodDesc') {
$("#sweetFoodDesc").show();
} else {
$("#sweetFoodDesc").hide();
}
});
});
$(document).ready(function() {
$('#blandFoodField').on('change', function() {
if (this.value == 'blandFoodDesc') {
$("#blandFoodDesc").show();
} else {
$("#blandFoodDesc").hide();
}
});
});
</script>
</head>
<body>
<div class="w3-row-padding" id="spicyFood">
<div class="w3-third">
<label class="w3-text-green" for="spicyFoodLabel"><b>Do you like spicy food?</b></label>
<p>
<select id="spicyFoodField">
<option value="" disabled selected>Select...</option>
<option value="spicyFoodDesc">Yes</option>
<option value="no">No</option>
</select>
</p>
</div>
<div class="w3-twothird">
<p>
<textarea class="w3-hover-light-blue" id="spicyFoodDesc" name="spicyFoodDesc" rows="2" hidden> </textarea>
</p>
</div>
</div>
<div class="w3-row-padding" id="sweetFood">
<div class="w3-third">
<label class="w3-text-green" for="spicyFoodLabel"><b>Do you like sweet food?</b></label>
<p>
<select id="sweetFoodField">
<option value="" disabled selected>Select...</option>
<option value="sweetFoodDesc">Yes</option>
<option value="no">No</option>
</select>
</p>
</div>
<div class="w3-twothird">
<p>
<textarea class="w3-hover-light-blue" id="sweetFoodDesc" name="sweetFoodDesc" rows="2" hidden> </textarea>
</p>
</div>
</div>
<div class="w3-row-padding" id="sweetFood">
<div class="w3-third">
<label class="w3-text-green" for="blandFoodLabel"><b>Do you like sweet food?</b></label>
<p>
<select id="blandFoodField">
<option value="" disabled selected>Select...</option>
<option value="blandFoodDesc">Yes</option>
<option value="no">No</option>
</select>
</p>
</div>
<div class="w3-twothird">
<p>
<textarea class="w3-hover-light-blue" id="blandFoodDesc" name="blandFoodDesc" rows="2" hidden> </textarea>
</p>
</div>
</div>
</body>
</html>
There is certainly a way to achieve what you're after, and my preference is to use a combination of one event listener, and data attributes.
The idea is that you apply one event that fires on the change of any select, rather than having one for each.
$("select").on("change", ...);
To find out exactly which one changed, you can use $(this). Therefore, $(this).val() will tell us if the dropdown is switching to "yes" or "no".
var selectedValue = $(this).val();
We can add the parameter data-for-id to each description, and set it to the ID of the associated select. For example, if you have a select with an id of mySelect, the textarea would have data-for-id="mySelect".
<select id="spicyFoodField">
....
</select>
<textarea data-for-id="spicyFoodField" />
Now we've created a link between our select and its textarea. Let's implement that in our jQuery code, so that when the select gets changed, it knows what textarea to look for:
//Set the associated text area to whatever textarea has
//the same data-for-id as the changing select list
var $associatedTextarea = $("textarea[data-for-id=" + $(this).attr("id") + "]");
Finally, we can implement our logic to hide the area, or show the area:
if (selectedValue == "yes") {
$associatedTextarea.show();
} else {
$associatedTextarea.hide();
}
Now, any time we want to add a new Select / Textarea, all we have to do is put data-for-id="associated-select-id" on the textarea, and the code will handle the rest.
Complete example:
$(document).ready(function() {
$("select").on("change", function() { //When a select changes
var selectedValue = $(this).val(); //Check its new value
//Get associated textarea
var $associatedTextarea = $("textarea[data-for-id=" + $(this).attr("id") + "]");
if (selectedValue == "yes") {
$associatedTextarea.show();
} else {
$associatedTextarea.hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<div class="w3-row-padding" id="spicyFood">
<div class="w3-third">
<label class="w3-text-green" for="spicyFoodLabel"><b>Do you like spicy food?</b></label>
<p>
<select id="spicyFoodField">
<option value="" disabled selected>Select...</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</p>
</div>
<div class="w3-twothird">
<p>
<textarea class="w3-hover-light-blue" data-for-id="spicyFoodField" id="spicyFoodDesc" name="spicyFoodDesc" rows="2" hidden> </textarea>
</p>
</div>
</div>
<div class="w3-row-padding" id="sweetFood">
<div class="w3-third">
<label class="w3-text-green" for="spicyFoodLabel"><b>Do you like sweet food?</b></label>
<p>
<select id="sweetFoodField">
<option value="" disabled selected>Select...</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</p>
</div>
<div class="w3-twothird">
<p>
<textarea class="w3-hover-light-blue" data-for-id="sweetFoodField" id="sweetFoodDesc" name="sweetFoodDesc" rows="2" hidden> </textarea>
</p>
</div>
</div>
<div class="w3-row-padding" id="sweetFood">
<div class="w3-third">
<label class="w3-text-green" for="blandFoodLabel"><b>Do you like sweet food?</b></label>
<p>
<select id="blandFoodField">
<option value="" disabled selected>Select...</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</p>
</div>
<div class="w3-twothird">
<p>
<textarea class="w3-hover-light-blue" data-for-id="blandFoodField" id="blandFoodDesc" name="blandFoodDesc" rows="2" hidden> </textarea>
</p>
</div>
</div>
<div class="addMore">
<div class="row addPlus">
<p class="emergencyTitle">Child 1</p>
<div class="col-xs-6">
<form role="form">
<div class="form-group">
<label for="name">Student Name</label>
<input type="text" class="form-control" name="ch1_name">
</div>
<div class="form-group">
<label for="name">Class</label><br>
<select name="ch1_class">
<option value=""> 1 </option>
<option value=""> 2</option>
<option value=""> 3 </option>
</select>
</div>
</form>
</div>
<div class="col-xs-6">
<form role="form">
<div class="form-group">
<label for="name">DOB</label>
<input type="text" class="form-control" name="ch1_dob" id="datepicker">
</div>
<div class="form-group">
<label for="name">Section</label><br>
<select name="ch1_secion">
<option value=""> A </option>
<option value=""> B </option>
<option value=""> C </option>
</select>
</div>
</form>
</div>
</div>
</div>
On the click of a button I am doing this ..
$child = $('.addPlus')
$('.addMore').append($child)
But I cannot seem to add the addPlus div, how over $('.addMore').append("hi") works fine. Can anyone help me out where I am going wrong.
if you want to clone the item - you can use
$('.addPlus').first().clone().appendTo('.addMore')
.addPlus is already appended to .addMore, so your jQuery would work but have no effect.
Assuming you want to copy the existing instance of .addPlus you should call clone() on it before appending it to the parent, like this:
var $newChild = $('.addPlus').first().clone()
$('.addMore').append($newChild)