JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form-group">
  <label class="col-md-4 control-label">Section:</label>
  <div class="col-md-8">
    <select id="middle" class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
    </select>
  </div>
</div>

<br /><br />

<div class="form-group">
  <label class="col-md-4 control-label" id="output"></label>
  <div class="col-md-8">
    <select id="bottom" class="form-control">
      <option>11</option>
      <option>12</option>
      <option>13</option>
    </select>
  </div>
</div>

JavaScript

$("#middle").change(function() {
  var value = $(this).find(":selected").text();
  $("#output").text(value);
  sessionStorage.setItem(this.id, value);
}).val(function(){return (sessionStorage.getItem(this.id) ? sessionStorage.getItem(this.id) : $(this).find("option:first").text());}).change(); //set values on pageload