Reputation: 4962
<div id="del2">
<textarea placeholder="School" class="form-control input-lg" name="message2" id="message2" rows="1" cols="30">School</textarea>
<button id="delete1" type="button" class="btn btn-default">Delete this Widget</button></div>
code
$("#"+divid) .clone().attr('id', 'del'+ value).insertAfter($("#"+divid)).find('textarea').attr('name', 'message'+ value).attr('id', 'message'+ value).find("button").button().attr('id', 'delete'+value);
I am able to change the id of div and textarea on clone but the issue is that i cant change the id of button id.
Upvotes: 0
Views: 172
Reputation: 66123
That is because you are trying to find <button>
in the <textarea>
element. I have indented your code to make it a little more readable:
$("#"+divid)
.clone()
.attr('id', 'del'+ value)
.insertAfter($("#"+divid))
.find('textarea')
.attr('name', 'message'+ value)
.attr('id', 'message'+ value)
.find("button") // Problem is here - you are finding <button> in <textarea>
.button()
.attr('id', 'delete'+value);
Try using .end()
(see documentation) after you're done working with an element fetched using .find()
, in order to return the previous selected object. Also, you can actually combine the two .attr()
methods by using objects:
$('#'+divid)
.clone()
.attr('id', 'del'+ value)
.insertAfter($('#'+divid))
.find('textarea')
.attr({
'name': 'message'+ value,
'id': 'message'+ value
})
.end() // Forces return to previously matched elements, i.e. the cloned element
.find('button')
.button()
.attr('id', 'delete'+value);
Upvotes: 1