"Add More Fields Dynamic "
Bootstrap 3.3.0 Snippet by yabasha

<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 ----------> <div class="container"> <div class="row"> <div class='panel panel-default'> <div class='panel-heading'>Education</div> <div class='panel-body'> <div class='team-list'> <div class='team-details'> <div class='individual-fields'> <label for="graduation" class="col-sm-3 control-label">Graduation <span class="required-mark">*</span></label> <div class="col-sm-9"> <div class="row no-pad"> <div class='form-group col-sm-11'> <select class="form-control input-lg" name="graduation"> <option value="">-- Select --</option> <option>Under Graduate</option> <option>Graduate</option> <option>Post Graduate</option> <option>Doctorate </option> </select> </div> <div class=' col-sm-1 close-div-button close-added-div hidden-div'> <a class='delete' title='Delete'><i class="fa fa-trash-o"></i></a> </div> </div> </div> <div style="clear:both;"></div> </div> <div class="form-group"> <label for="specialisation" class="col-sm-3 control-label">Specialisation <span class="required-mark">*</span></label> <div class="col-sm-8"> <input type="text" class="form-control input-lg" id="" placeholder="" name="specialisation"> </div> </div> <div class="form-group"> <label for="skillimplement" class="col-sm-3 control-label">University </label> <div class="col-sm-8"> <input type="text" class="form-control input-lg" id="" placeholder="" name="skillimplement"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">Year of passing</label> <div class="col-sm-8"> <select class="form-control input-lg" id="" name="repeatTraining"> <option>-- Select --</option> <option>1988</option> <option>1989</option> <option>1990</option> </select> </div> </div> </div> </div> <div class='btn add-more teams col-sm-offset-5'><a><span>+</span>Add More Education </a></div> </div> </div> </div> </div>
/* css for add more item */ .nextBtn, .finish {margin-top: 20px;} .close-div-button{float: right;margin-right: -20px; cursor: pointer;} .current-field-checkbox { position: relative; height: 40px;margin-left: 27px;} .close-div-button .delete{ font-size: 22px;line-height: 45px; } .hidden-div{display: none;}
$(document).ready(function(){ $(function(){ // when use click on close button $('.team-list').on("click",".close-div-button",function(){ if($(this).parents('.team-details').find('input[name^=team_id]').val()!='') { var id=$(this).parents('.team-details').find('input[name^=team_id]').val(); var r=confirm('Are you sure you want to delete this experience details?'); if(r==true) { $(this).parents('.team-details').remove(); $.ajax({ url: "/index.php/creative/delete_team", type:"post", data:{"id":id}, success:function(data){ console.log(data); } }); $('.team-list').find('.team-details').last().css("border-bottom","0px"); } else if(r==false){ return; } } else{ $(this).parents('.team-details').remove(); $('.team-list').find('.team-details').last().css("border-bottom","0px"); } }); // when use click on reset button $('.team-list').on("click",".reset-button",function(){ var team_container=$(this).parents('.team-details'); console.log(team_container); $(team_container).find("input").not("input[name^=team_id]").val(''); // $(team_container).find("select").val(''); $(team_container).find("textarea").val(''); $(team_container).find("select").each(function(){ $('option:selected',this).removeAttr('selected'); // $(this).val(''); }); $(team_container).find('.gmaps-output-latitude').html(''); $(team_container).find('.gmaps-output-longitude').html(''); $(team_container).find("select[name='from_month[]'] option[value='January']").attr("selected","selected"); $(team_container).find("select[name='from_year[]'] option[value='2016']").attr("selected","selected"); $(team_container).find("select[name='to_month[]'] option[value='January']").attr("selected","selected"); $(team_container).find("select[name='to_year[]'] option[value='2021']").attr("selected","selected"); $(team_container).find('.to').next().removeClass('inlineBlock'); $(team_container).find('.to').next().addClass('hidden-div'); $(team_container).find('.current-position').hide(); $(team_container).find('.current-field-checkbox').show(); $(team_container).find('.to-month').show(); $(team_container).find('.to-year').show(); $(team_container).find("input[type=checkbox]").prop("checked",false); $(team_container).find('.tagit-choice').remove(); }); // when use click on add more item button var i=0;var a=0; var country=""; var state=""; $('select[name=country]').val(country); $('select[name=state]').val(state); $('.country').each(function(){ if($(this).val()!='India') { $(this).parents('.individual-fields').siblings('.state').hide(); } }); if($('#location-country').val()!="India") { $('#location-state').hide(); } else{ $('select[name=state]').addClass('required'); } }); var i=0; $('.teams').on("click",function(){ i++; console.log('cp1'); var team_div =$('.team-details')[0]; var cloned_team_div=$(team_div).clone(); $(cloned_team_div).find("input").val('') $(cloned_team_div).find('.tagit-choice,.tagit-new').remove(); $('.team-details').css("border-bottom","1px solid #DCE0E0"); $('.team-details').css("margin-bottom","20px"); $(cloned_team_div).css("border-bottom","0px"); $(cloned_team_div).find("textarea").html(''); $(cloned_team_div).find("textarea").val(''); $(cloned_team_div).find("select").each(function(){ var value=$(this).val(); $('option:selected',this).removeAttr('selected'); }); $(cloned_team_div).find('.current-position').removeClass('inlineBlock'); $(cloned_team_div).find('.current-position').addClass('hidden-div'); $(cloned_team_div).find("select[name='from_month[]'] option[value='January']").attr("selected","selected"); $(cloned_team_div).find("select[name='from_year[]'] option[value='2015']").attr("selected","selected"); $(cloned_team_div).find("select[name='to_month[]'] option[value='January']").attr("selected","selected"); $(cloned_team_div).find("select[name='to_year[]'] option[value='2015']").attr("selected","selected"); // $(cloned_team_div).find('.type-of-experience').val('creative'); $(cloned_team_div).find('.tags-div').show(); $(cloned_team_div).find('.current-position').removeClass('inlineBlock'); $(cloned_team_div).find('.current-position').addClass('hidden-div'); $(cloned_team_div).find('.to-month').css("display","inline-block"); $(cloned_team_div).find('.to-year').css("display","inline-block"); $(cloned_team_div).find('.close-div-button').show(); $(cloned_team_div).find('.reset-button').hide(); $(cloned_team_div).find('input[type=checkbox]').prop("checked",false); $(cloned_team_div).find('input[type=checkbox]').val()==0; $(cloned_team_div).clone().appendTo('.team-list'); // when use click on checkbox for still working here $('.team-list').on("click","input[type=checkbox]",function(){ if($(this).prop("checked")) { console.log("cp1"); $(this).parents('.experience-checkbox').siblings('.to-month').hide(); $(this).parents('.experience-checkbox').siblings('.to-year').hide(); // $(this).parents('.experience-checkbox').siblings('.date-div').find('.currrent-position').html('Present'); $(this).parents('.experience-checkbox').siblings('.current-position').removeClass('hidden-div'); $(this).parents('.experience-checkbox').siblings('.current-position').addClass('inlineBlock'); } else { console.log("cp2"); // $(this).parents('.experience-checkbox').siblings('.date-div').find('.currrent-position').html(''); $(this).parents('.experience-checkbox').siblings('.current-position').addClass('hidden-div'); $(this).parents('.experience-checkbox').siblings('.current-position').removeClass('inlineBlock'); $(this).parents('.experience-checkbox').siblings('.to-month').show(); $(this).parents('.experience-checkbox').siblings('.to-year').show(); } }); }); });

Related: See More


Questions / Comments: