<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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 clearfix"> <div class="col-md-12 column"> <table class="table table-bordered table-hover" id="tab_logic"> <thead> <tr > <th class="text-center"> # </th> <th class="text-center"> Name </th> </tr> </thead> <tbody> <tr id='addr0'> <td> 1 </td> <td> <div class="form-group form-group-multiple-selects col-xs-11 col-sm-8 col-md-4"> <div class="input-group input-group-multiple-select col-xs-12"> <select class="form-control" name="values[]"> <option value="">Select one</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> </select> <span class="input-group-addon input-group-addon-remove"> <span class="glyphicon glyphicon-remove"></span> </span> </div> </div> </td> </tr> <tr id='addr1'></tr> </tbody> </table> </div> </div> <a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a> </div>

$(document).ready(function(){ var i=1; $("#add_row").click(function(){ $('#addr'+i).html("<td>"+ (i+1) +"</td><td>" +"<div class='form-group form-group-multiple-selects col-xs-11 col-sm-8 col-md-4'>" +"<div class='input-group input-group-multiple-select col-xs-12''>" +"<select name='values[]"+i+"' class='form-control'>" +"<option value=''>Select</option>" +"<option value='1'>Telephonic Interview</option>" +"<option value='2'>Skype Interview</option>" +"<option value='3'>Personal Interview</option>" +"</select>" +"<span class='input-group-addon input-group-addon-remove'>" +"<span class='glyphicon glyphicon-remove'></span>" +"</span></div></div> " +"</td>"); $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>'); $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>'); i++; }); $("#delete_row").click(function(){ if(i>1){ $("#addr"+(i-1)).html(''); i--; } }); }); /* Selects */ $(function(){ var values = new Array(); $(document).on('change', '.form-group-multiple-selects .input-group-multiple-select:last-child select', function(){ var selectsLength = $('.form-group-multiple-selects .input-group-multiple-select select').length; var optionsLength = ($(this).find('option').length)-1; if(selectsLength < optionsLength){ var sInputGroupHtml = $(this).parent().html(); var sInputGroupClasses = $(this).parent().attr('class'); $(this).parent().parent().append('<div class="'+sInputGroupClasses+'">'+sInputGroupHtml+'</div>'); } updateValues(); }); $(document).on('change', '.form-group-multiple-selects .input-group-multiple-select:not(:last-child) select', function(){ updateValues(); }); $(document).on('click', '.input-group-addon-remove', function(){ $(this).parent().remove(); updateValues(); }); function updateValues() { values = new Array(); $('.form-group-multiple-selects .input-group-multiple-select select').each(function(){ var value = $(this).val(); if(value != 0 && value != ""){ values.push(value); } }); $('.form-group-multiple-selects .input-group-multiple-select select').find('option').each(function(){ var optionValue = $(this).val(); var selectValue = $(this).parent().val(); if(in_array(optionValue,values)!= -1 && selectValue != optionValue) { $(this).attr('disabled', 'disabled'); } else { $(this).removeAttr('disabled'); } }); } function in_array(needle, haystack){ var found = 0; for (var i=0, length=haystack.length;i<length;i++) { if (haystack[i] == needle) return i; found++; } return -1; } });