Fill select with ajax request

Question

I'm loading the select with the data from the database only when I click on the select like this:

var cars = 
    [ { colour: 'red'} 
    , { colour: 'white'} 
    , { colour: 'black'} 
    ] 

let x = 0;
const campos_max = 10000;
$('#add_field').click (function(e) {
  e.preventDefault(); 
  if (x < campos_max) {
    $('#listas').append(`<div class="teste"><div class="form-group col-md-2" style="width: 20.833333325%; flex: 0 0 20.833%;max-width: 20.833%;"><select class="form-control2 spoilart1 Reffee${x}" name="Ref[]"><option></option></select><span class="form-highlight"></span><span class="form-bar"></span><label class="label3" for="Ref"></label></div></div>`);
  }
});
$(document).on("click",".spoilart1",function() {
  var html = $(`.Reffee${x}`);    
        
  cars.forEach(element => {
    html.append(`<option value="`+element+`">`+element+`</option>`);
  });
  x++;
});

.form-control2 {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="listas">
</div>

<button type="button" id="add_field" class="btn btn-warning caixa">
  <i class="fas fa-plus"></i>
</button>

The problem I have is that only when I click the second time does it show the data returned in the select.

The reason for this is because I set the size of the select in the css with this line width: 100% ;, but I wanted to keep the size defined in the select and show the data returned in the first click.

If is set max-width: 100%; already returns the data on the first click, but the select will adjust the size according to the returned data and I wanted the select to keep the size of 100% regardless of the data returned from the database.

Answer 1

Change from a click event to a focus event:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style>
  .form-control2 {
    width: 100%;
  }
</style>

<div id="listas">
</div>

<button type="button" id="add_field" class="btn btn-warning caixa">
  <i class="fas fa-plus"></i>
</button>

<script>
  var cars =
      [ { colour: 'red'}
      , { colour: 'white'}
      , { colour: 'black'}
      ]

  let x = 0;
  const campos_max = 10000;
  $('#add_field').click (function(e) {
    e.preventDefault();
    if (x < campos_max) {
      $('#listas').append(`<div class="teste"><div class="form-group col-md-2" style="width: 20.833333325%; flex: 0 0 20.833%;max-width: 20.833%;"><select class="form-control2 spoilart1 Reffee${x}" name="Ref[]"><option></option></select><span class="form-highlight"></span><span class="form-bar"></span><label class="label3" for="Ref"></label></div></div>`);
    }
  });
  $(document).on("focus",".spoilart1",function() {
    var html = $(`.Reffee${x}`);

    cars.forEach(element => {
      html.append(`<option value="`+element+`">`+element+`</option>`);
    });
    x++;
  });
</script>

I have inspected the elements and they don't change until you click on the element.

Thanks,