Check out this link for using Bootstrap Select. The code works perfectly in the view, but when I try to implement it with jQuery below, it doesn't work. Can someone help me fix this issue?
View Code:
<table id="tableAppointment" style="background-color:powderblue;">
<tr>
<th style="text-align:center;" colspan="1">NAME</th>
<th style="text-align:center;" colspan="1">HSN/SAC</th>
<th><a href="#" class="addRow btn btn-warning vertical-center"><i class="glyphicon glyphicon-plus">ADD</i></a></th>
</tr>
<tr>
<td>
<select class="selectpicker" data-live-search="true" name="product_name[]">
<option value=""></option>
@foreach ($addnewitem as $key=>$addnewitems)
<option>{{$addnewitems->product_name}}</option>
@endforeach
</select>
</td>
<td>
<select class="selectpicker" data-live-search="true" name="part_no[]">
<option value=""></option>
@foreach ($addnewitem as $key=>$addnewitems)
<option>{{$addnewitems->part_no}}</option>
@endforeach
</select>
</td>
<td><a href="#" class="btn btn-danger "><i class="glyphicon glyphicon-remove">REMOVE</i></a></td>
</tr>
</table>
<script type="text/javascript">
$('.addRow').on('click',function(){
addRow();
});
function addRow()
{
var tr = '<tr>' + '<td><select class="selectpicker" data-live-search="true" name="product_name[]"><option value=""></option> @foreach ($addnewitem as $key=>$addnewitems)<option>{{$addnewitems->product_name}}</option>@endforeach </select></td>' + '<td><select class="selectpicker" data-live-search="true" name="part_no[]"><option value=""></option> @foreach ($addnewitem as $key=>$addnewitems)<option>{{$addnewitems->part_no}}</option>@endforeach </select></td>' + '<td><a href="#" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove">REMOVE</i></a></td>' + '</tr>';
$('tbody').append(tr);
};
$('.remove').live('click', function(){
var last = $('tbody tr').length;
if(last == 1){
alert("You can not remove the last row");
} else {
$(this).parent().parent().remove();
}
});
</script>