Jquery - клонирование абзаца без идентификатора

Question

<div id="note"></div>
<p>
Item 1 
<input name="one" type="checkbox" value="Item 1" />
</p> 
<p>
Item 2 
<input name="two" type="checkbox" value="Item 2" />
</p> 
<p>
Item 3 
<input name="anything" type="checkbox" value="Item 3" />
</p> 
<br/>
Current issue: Does not work as expected. We want to duplicate the paragraph containing the input field whenever it is clicked (involving updating the name). Constraint - Original html cannot be changed.

Скрипт (с помощью этого поста)

var plen;
$(document).on('click', 'input[type="checkbox"]', function(){
plen = $('p').length
$(this).parent().clone(true).appendTo('body').attr('id',''+plen)
$(this).prop('checked', true);
//alert(plen)
$('#note').text('More of item '+ plen)
});

Я добираюсь туда, но все еще далеко от желаемого результата. Объясняется в JSFiddle.

JSFiddle здесь: http://jsfiddle.net/Sergelie/ULywc/

Answer 1

Да, мы можем сделать клон проверенного родительского тега p. Ниже приведен пример кода.

HTML

<div id="note"></div>
<p>
Item 1 
<input name="one" type="radio" value="Item 1" />
</p>    

Код JQuery

var plen;
$(document).on('change', 'input[type="radio"]', function(){
    plen = $('p').length
    $(this).parent().clone(true).appendTo('body').attr('id','one'+plen)
    $(this).prop('checked', true);
    //alert(plen)
    $('#note').text('More of item '+ plen)
});

демонстрация