JSFiddle - React, Tailwind, and code Playground

HTML

<select name="text">
  <option selected>Yes</option>
  <option>No</option>
  <option>Maybe</option>
  <option>Perhaps</option>
</select>
<select name="value">
  <option>Yes</option>
  <option>No</option>
  <option>Maybe</option>
  <option>Perhaps</option>
</select>

CSS

div.btn {
  display: inline-block;
  border: 2px solid #ccc;
  margin-right: 5px;
  padding: 2px 5px;
  cursor: pointer;
}

div.btn.on {
  background-color: #777;
  color: white;
}

JavaScript

$("select").each(function() {
  var sname = $(this).attr('name');
  var thissel = $(this);
  console.log();
  $(this).append('<input id="sel'+sname+'" type="hidden" name="' + sname + '" value="'+$(thissel).val()+'">');
  $(thissel).children("option").unwrap().each(function(i) {

    var btn = $('<div class="btn" name="' + sname + '">' + $(this).text() + '</div>');
    if (i==0) btn.addClass('on');
    $(this).replaceWith(btn);
  });
});

$(document).on('click', '.btn', function() {
  var name = $(this).attr("name");
  console.log($(this).html());
  $("#sel"+name).val($(this).html());
  var selector = '.btn[name="' + name + '"]'
  $(selector).removeClass('on');
  //$('.btn').removeClass('on');
  $(this).addClass('on');
});