"Dynamic Amount List"
Bootstrap 3.3.0 Snippet by Nasir

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <br/> <br/> <div class=""> <div class="col-lg-12"> <div class="form-group listR_1" id="r1" style="display:none"> <button name="close" class="btn btn-primary closeBtn">close</button> <div class="col-md-4"> <input id="list_1" name="list_1" type="text" placeholder="placeholder" class="form-control input-md" readonly> </div> </div> <div class="form-group listR_2" id="r2" style="display:none"> <button id="close" name="close" class="btn btn-primary closeBtn">close</button> <div class="col-md-4"> <input id="list_2" name="list_2" type="text" placeholder="placeholder" class="form-control input-md" readonly> </div> </div> <div class="form-group listR_3" id="r3" style="display:none"> <button id="close" name="close" class="btn btn-primary closeBtn">close</button> <div class="col-md-4"> <input id="list_3" name="list_3" type="text" placeholder="placeholder" class="form-control input-md" readonly> </div> </div> <div class="form-group listR_4" id="r4" style="display:none"> <button id="close" name="close" class="btn btn-primary closeBtn">close</button> <div class="col-md-4"> <input id="list_4" name="list_4" type="text" placeholder="placeholder" class="form-control input-md" readonly> </div> </div> </div> <div class="col-lg-12 form-horizontal"> <fieldset> <!-- Form Name --> <legend>Form Name</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Name</label> <div class="col-md-4"> <input id="Name" name="Name" type="text" placeholder="placeholder" class="form-control input-md"> </div> </div> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Class</label> <div class="col-md-4"> <input id="Class" name="Class" type="text" placeholder="placeholder" class="form-control input-md"> </div> </div> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Degree</label> <div class="col-md-4"> <input id="Degree" name="Degree" type="text" placeholder="placeholder" class="form-control input-md"> </div> </div> <div class="form-group"> <label class="col-md-4 control-label" for="singlebutton"></label> <div class="col-md-4"> <button id="Add" name="Add" class="btn btn-primary">Add</button> </div> </div> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Amount</label> <div class="col-md-4"> <input id="Amount" name="Amount" type="text" placeholder="placeholder" class="form-control input-md" readonly> </div> </div> </fieldset> </div> </div>
$(document).ready(function () { flag = 1; $(".closeBtn").click(function () { $(this).parent().css('display', 'none'); var PID = $(this).parent().attr('id').split(' '); if (PID == "r1") { $("#list_1").val(' '); } if (PID == "r2") { $("#list_2").val(' '); } if (PID == "r3") { $("#list_3").val(' '); } if (PID == "r4") { $("#list_4").val(' '); } $("#Add,#Name,#Class,#Degree").prop("disabled", false); flag-- if(flag==4) { $("#Amount").val('930'); } if (flag == 3) { $("#Amount").val('660'); } if (flag == 2) { $("#Amount").val('360'); } if (flag == 1) { $("#Amount").val('0.00'); } }); $('#Add').click(function () { var Name = $('#Name').val(); var Class = $('#Class').val(); var Degree = $('#Degree').val(); $("#Degree,#Class,#Name").css('border', 'solid 1px #ccc'); if (Name == "" || Class == "" || Degree == "") { if (Name == "") { $("#Name").css('border', 'solid 1px red'); } if (Class == "") { $("#Class").css('border', 'solid 1px red'); } if (Degree == "") { $("#Degree").css('border', 'solid 1px red'); } return } var ListRecords = Name + '; ' + Class + '; ' + Degree; if(flag==1) { $("#list_1").val(ListRecords); $("#Amount").val('360'); $(".listR_1").css('display', 'block'); $("#Name,#Class,#Degree").val(''); } else if(flag==2) { $("#list_2").val(ListRecords); $("#Amount").val('660'); $(".listR_2").css('display', 'block'); $("#Name,#Class,#Degree").val(''); } else if (flag == 3) { $("#list_3").val(ListRecords); $("#Amount").val('930'); $(".listR_3").css('display', 'block'); $("#Name,#Class,#Degree").val(''); } else { $("#list_4").val(ListRecords); $("#Amount").val('1080'); $("#Name,#Class,#Degree").val(''); $("#Add,#Name,#Class,#Degree").prop("disabled", true); $(".listR_4").css('display', 'block'); } flag++ }); });

Related: See More


Questions / Comments: