I'm making a webpage with a submit form where you can submit multiple time periods. On each period you can add extra comments when you click on a checkbox. This works fine for 1 period but when I add more periods with .clone() in jQuery it alters all checkboxes.
How should I resolve this problem?
You have some mistakes in javascript codes.
First, you have to show/hide textbox only for that section. In order to do this, you can use closest() and find() methods of jQuery.
Secondly, when checking checked property, it is better to use $(this) of jQuery because javascript's this is something different there.
Finally, when clonning an element you should use true parameter if you want to clone actions of elements, too.
Working codes are:
$( document ).ready(function() {
$("#tijdstiptoevoegen").on( "click", function(e){
e.preventDefault();
$( ".tijdstip" ).clone(true).appendTo( ".tijdstippen" );
});
$(".chkUitleg").on("change",function() {
if($(this).is(":checked")) {
$(this).closest(".tijdstip").find(".verdere_uitleg").show();
}
else
{
$(this).closest(".tijdstip").find(".verdere_uitleg").hide();
}
});
});
var i = 0; var cloneid = $( '#tijdstip'+ i ); var prev = i; var previd = $( '#tijdstip'+ prev ); i = i + 1; $( previd ).clone(true).attr('id', 'tijdstip'+(i) ).find("input:text").val("").end().insertAfter( cloneid );