Expected behavior When the page loads and no select inputs have been manipulated, there should not be a "X" in the dropdown as if an option was selected. This "X" or Clear Button should only appear if an option was selected.

Actual behavior By default when the page loads, there is a "X" inside the dropdown.

Resources (screenshots, code snippets etc.)

Markup>>>

<div class="w-100">
                    <select
                      class="select"
                      id="include_dropdown"
                      data-mdb-clear-button="true"></select>
                    <label class="form-label select-label">Include</label>
                  </div>

JS Script>>>

function initSavedIncludeLists() {
  var $select = $("#include_dropdown");

  $select.empty(); // Clear existing options
  $.ajax({
    url: "./admin/functions/get_include_list_values.php",
    dataType: "json",
    cache: false,
    success: function (data) {
      $.each(data, function (index, group) {
        // Check if group exists and has the groupLabel property
        if (
          group &&
          group.hasOwnProperty("groupLabel") &&
          group.groupLabel !== null
        ) {
          var $optgroup = $("<optgroup/>").attr("label", group.groupLabel);

          // Add a disabled, hidden, and selected option as the first option
          var $placeholderOption = $("<option/>", {
            disabled: true,
            selected: true,
            hidden: true,
            value: "",
          });

          if (group.hasOwnProperty("options")) {
            $.each(group.options, function (index, option) {
              var $option = $("<option/>")
                .attr("value", option.value)
                .text(option.optionLabel);
              $optgroup.append($option);
            });
            $select.append($placeholderOption, $optgroup);
          }
        }
      });
    },
  });
}