Cant get the correct value from select

Question

I am using a "select" which, depending on the selected option, shows another "select".

It seems to work fine, but when getting the value via POST, I always get the value of the last "option".

I have tried in different ways and more than seeing the solution, I am interested in understanding what I am failing.

Thanks in advance.

  function mostrar(id) {
      if (id == "Company1"){
        $("#Company1").show();
        $("#Company2").hide();

      }

      if (id == "Company2"){
        $("#Company1").hide();
        $("#Company2").show();
      }
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-6">
                        <label>Selecciona compañia</label>
                            <select class="form-control" id="company" name="company" onChange="mostrar(this.value);">
                                <option value="Company1">Company1</option>
                                <option value="Company2">Company2</option>
                            </select>
                    <div id="Company1" class="option" style="display: none;">
                        <select class="form-control" name="nombreTarifa" required>
                            <option value="1">company1-option1</option>
                            <option value="2">company1-option2</option>
                        </select>
                    </div>
                    <div id="Company2" class="option" style="display: none;">
                        <select class="form-control" name="nombreTarifa" required>
                            <option value="3">company2-option1</option>
                            <option value="4">company2-option2</option>
                        </select>
                    </div>
                </div>