JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="order_by_wr">

  <a data-role="button" data-val="menu_order" class="select-change" id="btna">Name</a>
  <a data-role="button" data-val="popularity" class="select-change" id="btnb">Popular</a>
  <a data-role="button" data-val="price-desc" class="select-change" id="btnc">Price</a>
 

  <form class="woocommerce-ordering" method="get">
    <select name="orderby" class="orderby" id="orderby">
      <option value="menu_order" selected="selected">Name</option>
      <option value="popularity">Popular</option>
      <option value="price-desc">Price</option>
    </select>
  </form>
</div>

CSS

a {
  padding:10px;
  color:green;
}
a.selected {
  color:red;
}

JavaScript

(function($) {
  $('.select-change').click(function() {
    var select = $('#orderby');
    select.val($(this).data('val')).trigger('change');
    $('option:selected', select).toggleClass('selected')
  })
})(jQuery);