Кастомный селект

custom select.html

<div id="select-country" class="select-country">
  <p class="select-country__current-point" onclick="selectShow()">Country:<span id="current-point"><?php echo $map_data[0]->country_title; ?></span></p>
  <ul class="select-country__list-point">
    <?php foreach ( $map_data as $item ) { ?>
      <li><a data-id="<?php echo $item->country_id; ?>" class="select-point" href="#"><?php echo $item->country_title; ?></a></li>
    <?php } ?>
  </ul>
</div>

custom select.js

function selectShow () {
  var currentPoint = document.getElementById('select-country');
  currentPoint.classList.toggle('show');
}

function addCountry (selectPoint) {
  var currentPoint = document.getElementById('current-point');
  var valuePoint = selectPoint.innerHTML;
  currentPoint.innerHTML = valuePoint;
}

function removeClass () {
  var itemClass = document.querySelectorAll('#select-country .show');
  for (var i = 0; i < itemClass.length; i++) {
    itemClass[i].classList.remove('show');
  }
}

function selectInnerHTML () {
  var selectPoint = document.getElementsByClassName('select-point');
  for (var i = 0; i < selectPoint.length; i++) {
    selectPoint[i].addEventListener('click', function (event) {
      var itemListId = this.getAttribute('data-id');
      addCountry(this);
      var item = document.getElementById('select-country');
      var itemClass = document.getElementsByClassName('show');
      for (var i = 0; i < itemClass.length; i++) {
        itemClass[i].classList.remove('show');
      }
    });
  }
}