Как подкорректировать стилизованный select?

Question

[flavian]

Есть стилизованный select, все работает хорошо, если на странице только 1 select, но когда их 2 и больше, то при выборе во втором, этот же option стает selected и в первом. Как исправить, чтобы можно было добавлять несколько подобных селектов на странице с одним и тем же идентификатором?
https://jsfiddle.net/vantal/nzhkg41o/

$('.select').each(function() {
    const _this = $(this),
        selectOption = _this.find('option'),
        selectOptionLength = selectOption.length,
        selectedOption = selectOption.filter(':selected'),
        duration = 150; // длительность анимации 

     /* _this.hide(); */ 
    _this.wrap('<div class="select"></div>');
    $('<div>', {
        class: 'new-select',
        //text: _this.children('option:disabled').text()
        text: _this.children('option:selected').text()
    }).insertAfter(_this);

    const selectHead = _this.next('.new-select');
    $('<div>', {
        class: 'new-select__list'
    }).insertAfter(selectHead);

    const selectList = selectHead.next('.new-select__list');
    //for (let i = 1; i < selectOptionLength; i++) {
    for (let i = 0; i < selectOptionLength; i++) {
    //
    //
        $('<div>', {
            class: 'new-select__item',
            html: $('<span>', {
                text: selectOption.eq(i).text()
            })
        })
        .attr('data-value', selectOption.eq(i).val())
        .appendTo(selectList);
    }

    const selectItem = selectList.find('.new-select__item');
    selectList.slideUp(0);
    selectHead.on('click', function() {
        if ( !$(this).hasClass('on') ) {
            $(this).addClass('on');
            selectList.slideDown(duration);

            selectItem.on('click', function() {
                let chooseItem = $(this).data('value');

                $('select').val(chooseItem).attr('selected', 'selected');
                selectHead.text( $(this).find('span').text() );

                selectList.slideUp(duration);
                selectHead.removeClass('on');
            });

        } else {
            $(this).removeClass('on');
            selectList.slideUp(duration);
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="select_box"> 
<select class="select">
  <option selected value="USD">USD</option>
  <option value="TSJ">EURO</option>
  <option value="RUB">RUB</option>
</select>
<select class="select">
  <option selected value="USD">USD</option>
  <option value="TSJ">EURO</option>
  <option value="RUB">RUB</option>
</select>
</div>

.select {
    display: inline-block;
    max-width: 215px;
    margin-right: 25px;
    width: 85px;
    position: relative;
}

.new-select {
  border: 2px solid #ced4da;
  padding: 2px 15px;
  cursor: pointer;
  position: relative;
  float: right;
  width: 85px;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  min-height: 20px
}

.new-select__list {
  border: 0px solid #ced4da;
  cursor: pointer;
  position: absolute;
  top: 42px;
  left: 12px;
  width: 100%;
  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: #fff;
  z-index: 10;
}

.new-select__list.on {
    display: block;
}

Answer 1

[Stalker_RED]

$('select')
так вы выбираете вообще все select-ы на странице, а при выборе val получаете первый попавшийся.
Следует их как-то различать, и обращаться к нужному.