Manage dynamic elements within dynamic elements in jQuery
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>
<div class="row">
<fieldset class="frame-border">
<legend class="frame-border">Members Registration</legend>
<div class="alert alert-warning alert-dismissible" role="alert" id="memberMinAlert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
Minimum one member is required.
</div>
<div class="row">
<div class="form-group-sm required">
<label class="col-xs-2 col-md-2"> </label>
<label class="control-label col-xs-2 col-md-3">Name</label>
<label class="control-label col-xs-2 col-md-2">Type</label>
</div>
<div class="form-group-sm">
<label class="control-label col-xs-2 col-md-2">1st Parameter</label>
<label class="control-label col-xs-2 col-md-2">2nd Parameter</label>
</div>
<div class="col-xs-2 col-md-1">
<span class="glyphicon glyphicon-plus-sign big" id="memberAdd" data-toggle="popover" data-placement="right" title="Click to add a member."></span>
<span class="glyphicon glyphicon-minus-sign big" id="memberRemove" data-toggle="popover" data-placement="right" title="Click to remove a member."></span>
</div>
</div>
<div class="member-template">
<div class="row">
<div class="form-group-sm required">
<label class="control-label col-xs-2 col-md-2" id="registrationMemberLabel">Member</label>
<div class="col-xs-2 col-md-3">
<span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Name of the member."></span>
<input...
CSS
fieldset.frame-border {
border: 1px groove #ddd !important;
padding: 0 5px 10px !important;
margin: 0 0 5px 0 !important;
-webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;
}
legend.frame-border {
font-size: 1.1em !important;
font-weight: bold !important;
text-align: left !important;
width:inherit;
padding:0 5px;
border-bottom:none;
margin-bottom:5px;
}
.form-group-sm.required .control-label:after {
content:"*";
color:red;
}
.row {
margin-left: 8px !important;
margin-right: 8px !important;
padding-bottom: 8px !important;
}
.help {
position:absolute;
right:-5px;
top:5px;
}
.glyphicon.big {
font-size: 1.2em;
}
.padding-lr-xs {
padding-right:5px !important;
padding-left:5px !important;
}
.member-template {
display:none;
}
JavaScript
function registrationTypeChange(memberNum) {
var theValue = $('#registrationMember' + memberNum + 'Type').find("option:selected").text();
if (theValue === "Yearly") {
$('#registrationMember' + memberNum + 'Param1Help').attr("title", "Please provide the year of membership");
$('#registrationMember' + memberNum + 'Param1').attr("placeholder", "Year");
$('#registrationMember' + memberNum + 'Param2').hide();
$('#registrationMember' + memberNum + 'Param2Help').hide();
} else if (theValue === "Period") {
$('#registrationMember' + memberNum + 'Param1Help').attr("title", "Please provide the starting year of membership");
$('#registrationMember' + memberNum + 'Param1').attr("placeholder", "From");
$('#registrationMember' + memberNum + 'Param2Help').attr("title", "Please provide the ending year of membership");
$('#registrationMember' + memberNum + 'Param2').attr("placeholder", "To");
$('#registrationMember' + memberNum + 'Param2').show();
$('#registrationMember' + memberNum + 'Param2Help').show();
}
}
function addMember() {
var memberNum = $('.member').length + 1;
var $html = $('.member-template').clone();
$html.find('[id=registrationMemberLabel]').html("Member" + memberNum);
$html.find('[id=registrationMemberLabel]').attr("id", "registrationMember" + memberNum + "Label");
$html.find('[id=registrationMemberName]').attr("id", "registrationMember" + memberNum + "Name");
$html.find('[id=registrationMemberType]').attr("id", "registrationMember" + memberNum + "Type");
$html.find('[id=registrationMemberParam1]').attr("id", "registrationMember" + memberNum + "Param1");
$html.find('[id=registrationMemberParam1Help]').attr("id", "registrationMember" + memberNum + "Param1Help");
$html.find('[id=registrationMemberParam2]').attr("id", "registrationMember" + memberNum + "Param2");
$html.find('[id=registrationMemberParam2Help]').attr("id",...