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() {
  $("#output").text($(this).find(":selected").text());
});

$(".form-control").change(function() {
  sessionStorage.setItem(this.id, $(this).find(":selected").text()); //store select's value on change
}).each(function() {
  if (sessionStorage.getItem(this.id)) {$(this).val(sessionStorage.getItem(this.id));} //set select's value on pageload
}).change(); //trigger change on pageload