php - Dropdown list fed in Chrome but not in Firefox

but not with Firefox :

With Chrome's console (console.log($("[name='liste_horaire']").length);)

I see 1 and 0 with Firefox

Here is the reactjs code (which I found)

    var layout = {};
      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_3__["Container"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_3__["Container"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h2", null, "2020-2021 2\xE8me quadrimestre 31/03/2020 MA Bloc 1")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
        className: "form-group row"
      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("label", {
        className: "col-md-4 col-form-label text-md-right"
      }, "Liste des horaires"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
        className: "col-md-6"
      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("select", {
        onChange: this.handleChange,
        type: "text",
        className: "form-control selectpicker",
        name: "liste_horaire"
      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("option", {
        value: "test",
        defaultValue: true
      }, "1"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("option", {
        value: "test2"
      }, "2")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_3__["Container"], {
        className: "custom-home-table"
      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_3__["Button"], {
        onClick: this.onAddItem
      }, "Ajouter un evenement"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(ResponsiveReactGridLayout, _extends({
        onBreakpointChange: this.onBreakpointChange
      }, this.props, {
        /*  layout={layout}
          onLayoutChange={( layout) =>
              this.onLayoutChange(layout)
          }*/
        onDragStop: this.onDragStop,
        onResizeStop: this.onResizeStop
      }), daysLayout.map(function (item) {
        return createDayElement(item);
      }), layout1.map(function (item) {
        return createStaticElement(item);
      }), lodash__WEBPACK_IMPORTED_MODULE_2___default.a.map(this.state.items, function (el) {
        return _this2.createElement(el);
      }))));
    }
  }]);

and the jQuery code

$.ajax({
  type: 'get',
  url: 'getAllHoraires',
  dataType: 'json',
  success: function success(data) {
    
    //  console.log('getAllHoraires:');
    //  console.log(data);
    
    console.log($("[name='liste_horaire']").length);

    $("[name='liste_horaire']").empty(); //je vide la ld avant de la remplir, autrement doublon
    
    $.each(data, function (idx, value) //parcours du retour php quie est au format json
    {
      //ajoute le id et le nom de l'horaire ?� la liste deroulante
      $("[name='liste_horaire']").append($('<option/>').val(value.id).html(value.name + ' ' + value.id));
      console.log(value.idx);
      console.log(value.name);
    }); //fin du each
  },
  error: function error(_error) {
    alert("dans erreur ajax get liste horaire ");
    console.log(_error);
  }
}); //https://github.com/STRML/react-grid-layout/blob/master/test/test-hook.jsx
//https://github.com/STRML/react-grid-layout/blob/master/test/examples/6-dynamic-add-remove.jsx
//we use external class and function
//call external function makeLayout with as argument the class AddRemoveLayout

Object(_makeLayout__WEBPACK_IMPORTED_MODULE_0__["makeLayout"])(_AddRemoveLayout__WEBPACK_IMPORTED_MODULE_1__["AddRemoveLayout"]); //getHoraire

as well as the PHP code (Laravel 7) :

public function getAllHoraires()
    {
        $horaires = Horaire::get();
       /* $quadrimestres = Quadrimestre::latest()->get();
        $years = Year::latest()->get();*/

        return response()->json($horaires);
    }

Could you please tell me how I can solve this problem and at the same time improve the code?

Solution:

I found the solution :

Before, I called my Object after the Ajax, now, I call it before and it works :

makeLayout(AddRemoveLayout);

$.ajax({
        type: 'get',
        url: 'getAllHoraires',
        dataType: 'json',
        success: function(data)

Hope it will help others...