Develop Reference

Changing a dynamically created label's text with keyup() issue

I am creating a form dynamically and therefore edit the form elements’ properties. When attempting to change the label, assigning an auto-generated id works fine but when changing this label using the generated id, the function or keyup() from jQuery keeps calling all the previously created label id(s). this means when i want to edit one label, it ends up editing every label.
HTML
<input type="text" id="change-label"><br><br>
<button id="add-button">add label</button>
<div id="add-label"></div>
JavaScript/jQuery
$('#add-button').click(function(){
var div = document.createElement('div');
var textLabel = document.createElement('label');
var labelNode = document.createTextNode('untitled');
textLabel.appendChild(labelNode);
textLabel.id = autoIdClosure();
$('#change-label').val('untitled');
div.appendChild(textLabel);
$('#add-label').append(div);
});
var autoIdClosure = (function(){
var counter = 0;
var labelId = "textInputLabel";
return function(){
counter += 1;
var id = labelId + counter;
editLabelWrapper(id)
return id;
}
})();
function editLabelWrapper(id){
function editLabel(){
var value = $(this).val();
$("#"+id).text(value);
}
$("#change-label").keyup(editLabel).keyup();
}
I’ve already found an alternative using onkeyup="$('#'+globaID).text($(this).val());", but I need to understand what I was doing wrong so I can learn from it.
JSFiddle

I think you are overthinking the matter...
Instead of using an unique id, rather use classes, makes it easier to handle.
So change <div id="add-label"></div> to <div class="add-label"></div>
Then what you want to do is, when a value is given in #change-label you want it in the last div.add-label.
So the function will become this:
$("#change-label").on('keyup', function() {
$('.add-label:last').text( $(this).val() );
});
Next what you want to do is bind a function to #add-button. Once it gets clicked, we want to add a new div.add-label after the last one. And empty the #change-label. You can do that by using this function:
$('#add-button').on('click', function() {
$('.add-label:last').after('<div class="add-label"></div>');
$('#change-label').val('');
});
Updated Fiddle

How to clone and place two different items in jquery in the respective positions

I have a div and a button to close that div. I am cloning them both separately and assigning a unique incrementing id to both. Everything is working in that the cloning happens and the button closes the Div.
I have a problem though regarding the placement of the button. I want the button to always be in the same position with reference to its cloned div. Any ideas how to do this?
HTML
X
<div id="id"></div>
Add
Javascript
function duplicateDiv(){
$('#btn').clone().attr('id', 'btn'+ cloneCount2++).insertBefore($('[id^=id]:first'));
$('#id').clone().attr('id', 'id'+ cloneCount++).insertAfter($('[id^=id]:first'));
//clearing the input items in the new cloned div
$("#id").find("input").val("");
}
function hideDiv(obj){
var currentId = $(obj).attr('id');
var divId = currentId.replace("btn", "id");
$("#"+divId).hide();
$("#"+currentId).hide();
}

If interpret Question correctly , try using .appendTo() , .insertAfter($("#btn" + cloneCount))
var cloneCount = 0, cloneCount2 = 0;
function duplicateDiv() {
//the close button
$("#btn")
.clone().attr("id", function(_, id) {
return id + (++cloneCount2)
})
.appendTo("body")
$("#id")
.clone().attr("id", function(_, id) {
return id + (++cloneCount)
})
.insertAfter($("#btn" + cloneCount))
//clearing the input items in the new cloned div
$("#id").find("input").val("");
}
function hideDiv(obj) {
var currentId = $(obj).attr('id');
var divId = currentId.replace("btn", "id");
$("#" + divId).hide();
$("#" + currentId).hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
X
<div id="id">div</div>
Add

One of the way is Jquery Offset
var destination = $('.original-content').offset(); // get position of original
$('.original-content').hide(); // hide original
$('.cloned-content').css({top: destination.top, left: destination.left}); // set position of cloned

jQuery: changed input value is not used for new addition

I have a hidden input field, wich has the value 0:
<input type="hidden" class="test" value="0" />
Now I added a button with some JS to add 0.5 to the value each time the button is clicked:
<a class="addition-input">Click me</a>
Here is the JS part:
$('a.addition-input').click(function(event) {
event.preventDefault();
var currentValue = parseInt($('input.test').val());
var step = 0.5;
var newValue = currentValue + step;
$('input.test').val(newValue);
});
So, the first time i click the link/button, the value gets from "0" to "0.5".
But then, when I click the link/button the second time, it won't change, it just stays "0.5".
I think that jQuery doesn't get the new input value by the second time click, it probably thinks the value is "0".
How can I fix that?
Update:
Here's the fiddle: https://jsfiddle.net/m7pvjrve/1/

Use
var currentValue = parseFloat($('input.test').val());
instead of
var currentValue = parseInt($('input.test').val());
parseInt() converts 0.5 to 0 everytime and the value you get is 0.5 which is actually the step value
Demo: http://jsfiddle.net/GCu2D/657/

Increment div class by +1 on click

I'm sure this is an easy question but I cannot figure it out.
I basically have a div with a number, 'div-1' for example, and need to +1 to the number every time another div is clicked. e.g. 'div-2' 'div-3' etc..

When you say a div with a number, It should be on id attribute.
<div class="your_div_selector" id="div-1">
so, in your javascript, using jquery and when the other div is clicked, just do this:
var div_id = $('.your_div_selector').attr("id")
var new_id = 1 + parseInt(div_id.split("-").pop());

Based on what you've described, it looks like you have an HTML div, which starts with a class of div-1. Every time the div is clicked, you want the div-n class to be replaced with a div-(n+1) class.
This is easily accomplished with an onclick listener.
<div id="mydiv" class="div-1"></div>
<script>
var mydiv = document.getElementById('mydiv');
mydiv.currentClass = 1;
mydiv.addEventListener('click', function() {
mydiv.classList.remove('div-' + mydiv.currentClass);
mydiv.classList.add('div-' + (++mydiv.currentClass));
});
</script>
Note that there should be a better solution, depending on your specific problem.

<div class="yourDivClass" id="myDiv"></div> <button id="incriment" onclick="incrementDivClass()">Click</button>
function incrementDivClass()
{
var divIncriment = ($('.yourDivClass').length);
$('#myDiv').append('<div class="yourDivClass" id="div-'+divIncriment+'">div-'+divIncriment+'</div>')
}
Demo

Change one element for each click with jquery

I have a box , like this :
<div class="box">
</div>
And i want to do something with jquery that changes the text of that element for each time that the .box get clicked !
For example,
for first time , i click on the box, i want to have : <div class="box">Test1</div>
For second time , i click on that , i want this : <div class="box">Test2</div>
+...
I khow i can use this code for click event :
$('.box').click(function(){
$(this).text();
});
But i want something to do , to have multiple values for each click !
EDit :
I don't need a value + count ! i need new string each time

You can use that code:
var myTexts = ["text1", "text2", "text3"];
$('div.box').click(function (indexOfArray) {
$(this).text(myTexts[indexOfArray]);
})

try to store your click count in a variable.
var i = 0;
$('.box').click(function(){
i++;
$(this).text('Test'+i);
});

var clix = 1;
$('div.box').click(function () {
$(this).text('Test' + clix++);
})
jsFiddle example

This is one way to do it. See this fiddle
$('.box').click(function(){
var $this = $(this),
count = $this.data("count") || 0;
count += 1;
$this.text("Test" + count.toString());
$this.data("count", count);
});