javascript - Select box not returning expected value -

i have form display different options depending on first select box.

if option 1 selected second dropdown shown option pre selected. if option 2 selected different dropdown 2 options shown.

the 2 new dropdowns have same id , name passing option through backend keeps returning wrong values. here jsbin

<p class="input_title">i 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 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>    // jquery $("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(){    console.log( 'plan id is: ' + $('#plan_id').val() ); }); 

id's must unique. instead of using same id, use class.

the reason getting wrong value you're using $('#plan_id').val() return value first match finds.

edit:
correct value current structure can use:

var vl = $(this).siblings('div:visible').find('select').val() console.log('plan id is: ' + vl ); 

but suggest modify structure, wrap them in form, give select containers same class, you'll have access them more easily.

jsfiddle demo

your selector use first match, regardless of using element, class or id. or using class can:

$('.signup-select:visible').val()