JSFiddle - React, Tailwind, and code Playground
HTML
<p class="input_title">I will use:</p>
<select name="js-rp-use" class="signup-select js-rp-use" id="rp-use" class="signup-select">
<option value="">Select Plan</option>
<option value="SOLO">Manage my own items</option>
<option value="OTHER">Manage others items</option>
</select>
<div class="js-rentpro-plan-solo">
<p class="input_title">System Plan:</p>
<select name="plan_id" id="plan_id" class="signup-select">
<option value="-1">Select plan</option>
<option value="1" selected>Plan Solo</option>
</select>
</div>
<div class="js-rentpro-plan-other">
<p class="input_title">System Plan:</p>
<select name="plan_id" id="plan_id" class="signup-select">
<option value="-1">Select plan</option>
<option value="2">Plan Business</option>
<option value="3">Plan Max</option>
</select>
</div>
<br>
<br>
<br>
<button type="button" id="submit">Submit</button>
JavaScript
$("div[class^='js-rentpro-plan-']").hide();
$('.js-rp-use').change(function () {
$('#js-rp-plan-text, .js-rentpro-plan-solo, .js-rentpro-plan-other').hide();
if ($(this).val() == 'SOLO') {
$('.js-rentpro-plan-solo').show();
} else if ($(this).val() == 'OTHER') {
$('.js-rentpro-plan-other').show();
} else {
$('#js-rp-plan-text').show();
}
});
$('#submit').click(function () {
var vl = $(this).siblings('div:visible').find('select').val()
console.log('plan id is: ' + vl );
});