i have HTML Codes which has table and row with drop down list
<tr>
<td class="col-sm-3">
<select class="form-control" name="classrooms[]">
<option value="" disabled>Select Room</option>
@foreach($rooms as $room)
<option value="{{$room->id}}">{{$room->description}}</option>
@endforeach
</select>
</td>
<td class="col-sm-3">
<select class="form-control" name="classroomstype[]">
<option value="" disabled>Select Room</option>
@foreach($rooms_type as $type)
<option value="{{$type->id}}">{{$type->description}}</option>
@endforeach
</select>
</td>
<td class="col-sm-3">
<input type="number" class="form-control" name="classroomsnumber[]" />
@error('classroomsnumber')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</td>
<td class="col-sm-3">
<a href="javascript:void(0);" class="btn btn-primary addmore" ><i class="fa-solid fa-plus"></i></i></a>
<a href="javascript:void(0);" class="btn btn-danger remove" ><i class="fa-solid fa-circle-minus"></i></a>
</td>
</tr>
and Jquery for above HTML code to make new Row Dynamically
<script>
$(document).ready(function() {
$(".addmore").on('click',function(){
data ='<tr>'+ $(this).closest('tr').html() +"</tr>";
$('#myTable').find('tbody:last').append(data);
});
$(".remove").on('click',function(){
$(this).closest('tr').remove();
});
});
</script>
it work what i want , but only the first button work to make new rows not every row button work and also remove work only “One Time”.
here is the screenshot