<h2 class='mb-3'>Multiple select witch fetch data</h2>

      <div class="singleComponent">

        <select id="fetch1" class="mdb-select md-form" multiple>

          <option value="" disabled selected>Choose your option</option>

          <option value="1">Option 1</option>

          <option value="2">Option 2</option>

          <option value="3">Option 3</option>

        </select>

        <label class="mdb-main-label">Example label</label>

        <button class="btn-save btn btn-primary btn-sm">Save</button>

      </div>

​

$(document).ready(() => {

  $('.mdb-select').materialSelect();

  const getData = elementId => {

    const $dynamicDataSelect = $(`#${elementId}`);

    const apiUrl = 'https://restcountries.eu/rest/v2/region/europe';

    fetch(apiUrl)

      .then(response => response.json())

      .then(json => {

        for (let i = 0; i < json.length; i++) {

          $dynamicDataSelect.append(`<option value="${json[i].name}" data-secondary-text="feched data">${json[i].name}</option>`);

        }

      });

  };

  getData('fetch1');

});