jquery - Select individual unique dialog for each option chosen -

i trying create unique confirmation dialog appears each option selected. have set dialog appear if option selected less selected option. seemed on front apart dialogs.

i have noticed on alerts when change option picking data-model attribute on each option @ times doesn't trigger correct dialog. (may have keep flicking through see it).

for example if select mono option - alert show ('bus-outputs-reduce-width-to-mono) correct dialog show "reduce stereo".

the variations different each time cannot figure out why doing this.

also if option didn't change until have pressed confirm (although know wouldn't able use .change function not sure else us)

any thoughts?

html

<select class="bus-width btn-light-outline" data-modal="fader-layout-new">     <option value="no path" data-modal="bus-outputs-remove-bus">no path</option>     <option value="mono" data-modal="bus-outputs-reduce-width-to-mono" selected="selected" >mono</option>     <option value="surround" data-modal="bus-outputs-reduce-width-to-stereo">stereo</option>     <option>5.1 surround</option>   </select>  <div class="overlay">      <a class="cancel">cancel</a>     <a class="confirm">confirm</a>  <div class="hide" id="bus-outputs-remove-bus">remove bus?</div> <div class="hide" id="bus-outputs-reduce-width-to-mono">reduce mono?</div> <div class="hide" id="bus-outputs-reduce-width-to-stereo">reduce stereo?</div>  </div> 

script:

var lastindex = null;  $('select.bus-width').on('change', function () {      var thisindex = $(this).find(":selected").index();     if(thisindex < lastindex){         var mymodal = $(':selected').attr("data-modal");         alert(mymodal);         $('#' + mymodal).stop().fadein(300);         $('.overlay').fadein(300);     }      lastindex = thisindex;  });   $('.confirm').click(function() {     $('.overlay').hide(); }); 

css:

.overlay {     position:fixed;     background:rgba(0,0,0,0.5);     top:0;     bottom:0;     right:0;     left:0;     text-align:center;     display:none;     z-index:99999; } .hide {     display:none;     position:absolute;     width:200px;     top:200px;     left:50%;     margin-left:-200px;     background:red; } .cancel {     background:white;     position:absolute;     top:270px;     left:200px;     padding:20px; } .confirm {     background:yellow;     position:absolute;     top:270px;     left:270px;     padding:20px; } 

demo: http://jsfiddle.net/susannalarsen/47a21r25/

please see my fiddle.

i added code below since think forgot hide other modals before showing correct one.

updated js

    if (thisindex < lastindex) {         var mymodal = $(':selected').attr("data-modal");         alert(mymodal);         $('.hide').hide();         $('#' + mymodal).fadein(300);         $('.overlay').fadein(300);     }