Problem taking different values from form - php

Question

I'm doing a form in PHP. I started using jQuery to make a select dropdown more interactive. Depending on your option, you will receive a new select dropdown with other options. The problem comes when you take the first option, the value is always the same.
$('#options').on('change', function(e) {
$('.option').hide();
$('#option-' + e.target.value).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>Contract type</label>
<select id="options" class="form-control" name="typeContract" required>
<option value="" selected disabled>Select options </option>
<option value="light">Light</option>
<option value="gas">Gas</option>
</select>
<div id="option-light" class="option" style="display: none;">
<br>
<select class="form-control" name="nameContract" required>
<option value="light1">1</option>
<option value="light2">2</option>
<option value="light3">3</option>
</select>
</div>
<div id="option-gas" class="option" style="display: none;">
<br>
<select class="form-control" name="nameContract" required>
<option value="gas1">gas1</option>
<option value="gas2">gas2</option>
</select>
</div>
</div>

Answer 1

You were very close.
But the jquery code tried to show an element with the id option-light or option-gas which do not exist in your code. So if you change your id's it works.
As pointed out by Carsten in the comments id should always be unique
<div class="form-group col-md-6">
<label>Contract type</label>
<select id="options" class="form-control" name="typeContract" required>
<option value="" selected disabled>Select options </option>
<option value="light">Light</option>
<option value="gas">Gas</option>
</select>
<div id="option-light" class="option" style="display: none;">
<br>
<select class="form-control" name="nameContract" required>
<option value="light1">1</option>
<option value="light2">2</option>
<option value="light3">3</option>
</select>
</div>
<div id="option-gas" class="option" style="display: none;">
<br>
<select class="form-control" name="nameContract" required>
<option value="gas1">gas1</option>
<option value="gas2">gas2</option>
</select>
</div>
</div>