JSFiddle - React, Tailwind, and code Playground

HTML

<div class="select-wrapper-foo">
  <button class="prev">&lt;</button>
  <select name="q" class="foo">
    <option value="не важно">не важно</option>
    <option value="важно">важно</option>
    <option value="отважно">отважно</option>
    <option value="бумажно">бумажно</option>
    <option value="фуражно">фуражно</option>
  </select>
  <button class="next">&gt;</button>
</div>

<div class="select-wrapper-foo">
  <button class="prev">&lt;</button>
  <select name="q2">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
  </select>
  <button class="next">&gt;</button>
</div>

CSS

/* прячем родную стралочку */
.select-wrapper-foo select {
  /* for Firefox */
  -moz-appearance: none;

  /* for Chrome */
  -webkit-appearance: none;
}

/* For IE10 */
.select-wrapper-foo select::-ms-expand {
  display: none;
}

JavaScript

document.querySelectorAll('.select-wrapper-foo').forEach(wrapper => {
  let select = wrapper.querySelector('select')
  let values = Array.from(select.children).map(el=>el.value)
  console.log(values)
  wrapper.querySelector('.prev').onclick = () => {
    let prevValue,
        currentIndex = values.indexOf(select.value);

    if (currentIndex === 0) {
      prevValue = values[values.length - 1]
    } else {
      prevValue = values[currentIndex - 1]
    }
    select.value = prevValue
  }
  wrapper.querySelector('.next').onclick = () => {
    let nextValue,
        currentIndex = values.indexOf(select.value);

    if (currentIndex === values.length - 1) {
      nextValue = values[0]
    } else {
      nextValue = values[currentIndex + 1]
    }
    select.value = nextValue
  }




})