JSFiddle - React, Tailwind, and code Playground

by Barry Margolin

HTML

<select id="MonthName" class="form-control">
    <option value="0">January</option>
    <option value="1">February</option>
    <option value="2">March</option>
    <option value="3">April</option>
    <option value="4">May</option>
    <option value="5">June</option>
    <option value="6">July</option>
    <option value="7">August</option>
    <option value="8">September</option>
    <option value="9">October</option>
    <option value="10">November</option>
    <option value="11">December</option>
</select>

<span class="chevron chevronLeft floatLeft">◀</span>
<span class="theMonth">Month</span>
<span class="chevron chevronRight floatRight">▶</span>

CSS

.chevron {
    cursor: pointer;
    margin: 0 1em;
}

JavaScript

$('.chevron').on('click', function() {
  if ($(this).hasClass('chevronLeft')) {
    var selectedMonth = parseInt($('#MonthName').val(), 10);
    (selectedMonth != 0) 
      ? $('#MonthName').val(selectedMonth - 1)
                       .trigger('change')
	  : $('#MonthName').val(11)
                       .trigger('change');
  }
		
  else {
    var selectedMonth = parseInt($('#MonthName').val(), 10);
    (selectedMonth !== 11)
	  ? $('#MonthName').val(selectedMonth + 1)
                       .trigger('change')
	  : $('#MonthName').val(0)
                       .trigger('change');
  }
});

$('#MonthName').on('change', function() {
   var monthText = 
    $('#MonthName option:selected').text();
    $('.theMonth').text(monthText);
});

$(function() {
  var monthText = 
    $('#MonthName option:selected').text()
$('.theMonth').text(monthText); 
});