JSFiddle - React, Tailwind, and code Playground

HTML

<div>Skill level:
  <select name="skillSet" id="skillSet">
    <OPTION ID="pro" VALUE=0>Professional</OPTION>
    <OPTION ID="adv" VALUE=1>Advanced</OPTION>
    <OPTION ID="beg" VALUE=2>Beginner</OPTION>
  </select>
</div>

<div>Travel time:
  <select name="months" id="months">
    <OPTION ID="jan" VALUE="0">January</OPTION>
    <OPTION ID="feb" VALUE="1">February</OPTION>
    <OPTION ID="mar" VALUE="2">March</OPTION>
    <OPTION ID="apr" VALUE="3">April</OPTION>
    <OPTION ID="may" VALUE="4">May</OPTION>
    <OPTION ID="jun" VALUE="5">June</OPTION>
    <OPTION ID="jul" VALUE="6">July</OPTION>
    <OPTION ID="aug" VALUE="7">August</OPTION>
    <OPTION ID="sep" VALUE="8">September</OPTION>
    <OPTION ID="oct" VALUE="9">October</OPTION>
    <OPTION ID="nov" VALUE="10">November</OPTION>
    <OPTION ID="dec" VALUE="11">December</OPTION>
  </select>
</div>

<div id='matrix'></div>

JavaScript

var condition = [
    [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
    [10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 110, 111],
    [20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 210, 211]
  ];

  // get current month
  var d = new Date();
  var n = d.getMonth();

  // preselect travel time to current month
  var e = document.getElementById('months');
  e.value = n;

  //first map overlay displayed for professionals [0] @ current month
  $(document).ready(function() {
    $("#matrix").empty().append(condition[0][n]);

  });

  // onselect function
  $(function() {
    $('#months').bind('change', function() {
      month = $(this).find('option:selected').val();
      divUpdate(skill = null, month);
    });

    $('#skillSet').bind('change', function() {
      skill = $(this).find('option:selected').val();
      divUpdate(skill, month = null);
    });

    divUpdate = function(skill, month) {
      currentDiv = $('#matrix');

      if (skill !== null) {
        currentDiv.data('Skills', skill);
        // var rowInt = parseInt(currentDiv.data('Skills'));
        // currentDiv.empty().append(condition[rowInt][null]);
      }
      if (month !== null) {
        currentDiv.data('Months', month);
      }

      // Cache original div contents, so that the select menu can be changed more than once.
      if (typeof currentDiv.data('contents') == 'undefined') {
        divContents = currentDiv.val();
        currentDiv.data('contents', divContents);
      } else {
        divContents = currentDiv.data('contents');
      }

    /*  currentDiv.empty().append(
        divContents
        .replace('Months', currentDiv.data('Months'))
        .replace('Skills', currentDiv.data('Skills'))
      );
*/
      var row = parseInt(divContents.replace('',currentDiv.data('Skills')));
      var col = parseInt(currentDiv.data('Months'));
      currentDiv.empty().append(condition[row][col]);

    }
  });