jQuery not resetting form successfully – Jquery ajax

I have a page with 2 forms, 1 is a regular form, 2 is a form in a hidden modal that is shown on a successful ajax post for the first form.

The issue I have is that, after the successful post, the modal is populated correctly, but if I close and re-open the modal, I get the previous values again.

Images to make things clear:

This is the correct functionality:

After pressing close and selecting a different address:

As you can see, the close and save changes buttons disappear, the area selector disappears, and the address from the previous request is still there. I tried clearing the changes I made but clearly I don’t understand what I’m doing.

This is my script:

<script type="text/javascript">

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

$(".btn-submit").click(function(e){

    e.preventDefault();
    var formData = $('#area_selector').serialize();

    $.ajax({
       type:'POST',
       url:"{{ url('ajaxRequest') }}",
       data: formData,
       success:function(data, response)
       {

          console.log(data.current_area.id);
          let current_area_id = data.current_area.id;
          let current_area_name = data.current_area.name;
          let current_area_div = $(
            '<option value="' + current_area_id +'" selected hidden>' + current_area_id + ' - ' + current_area_name + '</option>'
          );
          let address = data.addresses.address;
          let area = data.current_area.name;
          let form = $(
            '<label for="exampleInputEmail1">Address</label>' +
            '<input type="text" id="title" value ="' + address + '" name="address" class="form-control"><br>'


          );
          //$('#current_area').prepend(current_area_div);
          $('#area_id').prepend(current_area_div);
          $('#ajax-response').prepend(form);
          $("#exampleModal").modal('show');

          $(".btn-close").click(function(e){
            console.log("Close function works")
            $("#exampleModal").modal('hide');
            $('#area_id').html('');
            $('#ajax-response').html('');

          });
          //formData = '';


       }
    });

});

This is the modal:

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Edit your address:</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

          <form name = "test">
            <div id = "ajax-response">
              <div id = 'all-areas'>
                <label for="name">Area:</label>
                <div id = 'current_area'>
                <select name= "area_id" id = "area_id" class="form-control">

    </div>
    @foreach($areas as $area)
      <option value="{{$area->id}}">{{$area->id}} - {{$area->name}}</option>
    @endforeach
  </select>
</div>
          </form>
        </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-close" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary btn-submit2">Save changes</button>
      </div>
    </div>
  </div>
</div>

I have tried changing

$('#area_id').html('');
$('#ajax-response').html('');

to

$('#area_id').remove();
$('#ajax-response').remove();

This does remove the fields but if I click edit address they are not repopulated. I’m not sure but I think that "remove" is completely deleting the divs themselves and this is why it’s not re-populating it when I click the button.