how to add items to dynamic drop down list in laravel using ajax JQuery

Question

friends, I am facing an issue in Ajax actually. My code is working fine when the page is loaded. But When I click on the add button to add a new row for second entry it doesn't work. When Page loaded, it's working perfect When I click on Add ButtonAfter clicking on Add Button, It add duplicate text in drop-down box

Here is my code

                $(document).ready(function(){        
                    var experienceCount = 1;       
                    experience_field(experienceCount);
                    function experience_field(number)
                    {
                        html = '<div class="row">'              
                        html += '<div class="col-3"><div class="form-group"><label for="PreviousHospital">Previous Hospital</label><select class="form-control select2" name="PreviousHospital[]" id="PreviousHospital" style="width: 100%;"><option selected="selected">Select Previous Hospital</option></select></div></div>';          
                        $.ajax({
                            url: "{{ route('previousHospital') }}",
                            method:'get',
                            data:$(this).serialize(),
                            dataType:'json',                
                            success:function(data)                  
                            {                                                   
                                $.each(data, function(value, text){                     
                                    $("#PreviousHospital").append('<option value="' + text.Hospital + '">' + text.Hospital + '</option>');                       
                                });                      
                            }                  
                        });
                        html += '<div class="col-2"><div class="form-group"><label for="Experience">Experience</label><input type="text" class="form-control" name="Experience[]" id="Experience" required></div></div>';               
                        html += '<div class="col-3"><div class="form-group"><label for="WorkCountry">Country</label><select class="form-control select2" name="WorkCountry[]" id="WorkCountry" style="width: 100%;"><option selected="selected">Select Country</option></select></div></div>';             
                        html += '<div class="col-3"><div class="form-group"><label for="WorkCity">City</label><select class="form-control select2" name="WorkCity[]" id="WorkCity" style="width: 100%;"><option selected="selected">Select City</option></select></div></div>';             
                        if(number > 1)
                        {                           
                            html += '<div class="col-1"><div class="form-group"><label style="color: white;">Button</label><button type="button" name="experienceRemove" id="" class="btn btn-block btn-outline-danger btn-sm experienceRemove form-control" >Remove</button></div></div></div>';                                
                            $('.experience').append(html);                                 
                        }
                        else
                        {                            
                            html += '<div class="col-1"><div class="form-group"><label style="color: white;">Button</label><button type="button" name="experienceAdd" id="experienceAdd" class="btn btn-block btn-outline-success btn-sm form-control">Add</button></div></div></div>';                                                               
                            $('.experience').html(html);             
                        }
                    }                              
                    $(document).on('click', '#experienceAdd', function(){
                        experienceCount++;        
                        experience_field(experienceCount);
                    });
                    $(document).on('click', '.experienceRemove', function(){
                        experienceCount--;
                        $(this).closest(".row").remove();
                    });                                              
                });

You can check all images, in the first image, when I load the page. It works fine and populates the data to the dropdown list too. But if I click on the add button to add more dynamic fields so the Ajax doesn't work, it adds data in first loaded Dropdown list not in second dropdown list. What i need, i need it should add data in all dropdowns lists but not duplicate as you can see duplicate items in images. if user click add button.

Answer 1

I solved the problem, I was using the ID instead of Class name

$.ajax({
  url: "{{ route('previousHospital') }}",
  method:'get',
  data:$(this).serialize(),
  dataType:'json',                
  success:function(data)                  
  {                       
    $('.PreviousHospital').find('option').remove();                             
    $(".PreviousHospital").append('<option selected="selected">Select Previous Hospital</option>');
    $.each(data, function(value, text){                     
      $(".PreviousHospital").append('<option value="' + text.Hospital + '">' + text.Hospital + '</option>');
    });                      
  }                  
});

Answer 2

Add this before appened with eaxh

$('#PreviousHospital').find('option').remove();