jquery - Disable selected options based on the user's decision -

i'm trying create open environment user choose particular option, yet @ same time give them open opportunity choose them in order, yet eliminating choices they've chosen. code far stops me in tracks when executing them out of order. select , option pops within span. choose one. outcome delivered within span , same option appears yet eliminating 1 they've chosen.

here's html code

<div><select id="lies"> <option value="" selected='selected'>select lie...</option> <option value="fbi">we're undercover agents</option> <option value="super">we're superheroes</option> <option value="confess">we're bombers</option> </select></div>  <span id='fbi'> <p>"we're undercover students working fbi," say.</p> <p>"get outta here before put both in cuffs!" yells.</p> <p>"good job, <?php echo $_get['name']?>! got busted.."   </p> <p>"come on, korra, let's try 1 more! on there!" exclaim.</p> <div><select id="lies"> <option value="" selected='selected'>select lie...</option> <option value="fbi">we're undercover agents</option> <option value="super">we're superheroes</option> <option value="confess">we're bombers</option> </select></div> </span>  <span id='super'> <p>"let through, we're bulletproof!" fearlessly say.</p> <p>"are ya now?" asks cop lightly bops on head fist.</p> <p>"ow!" yell.</p> <p>"run along , go play somewhere else, stupid kid!"</p> <p>you , korra walk away feeling defeated.</p> <p>"any other ideas, <?php echo $_get['name']?>?" asks.</p> <p>"one more try!" run on police officer.</p> <div><select id="lies"> <option value="" selected='selected'>select lie...</option> <option value="fbi">we're undercover agents</option> <option value="super">we're superheroes</option> <option value="confess">we're bombers</option> </select></div> </span>  <span id='confess'> <p>"it us!"</p> <p>"alright off jail go!" says officer.</p> escorted off jail. end. </span> 

and here jquery

//keeps spans containing respondes hidden until option selected lietocops page  $('#lies').change(function(){ var contact = $(this).val();  // hides list / show list  if ( contact == ""){  $('#lies').show(); }else{ $('#lies').hide(); }  $("#lies option:selected").attr('disabled','disabled')     .siblings().removeattr('disabled');  // lie responses  if( contact == "fbi") {  $('#fbi').fadein(); }else if( contact == "super") {  $('#super').fadein(); }else if( contact == "confess") {  $('#confess').fadein();  } }); 

first, have problem multiple ids, that's not allowed. need make them classes.

and give storylines class (ex storyline).

so on selecting something

var $lies = $(".lies"); $lies.change(function(){ $("#firstlie").hide(); var $this = $(this); var contact = $this.val(); var $currentstoryline = $this.closest(".storyline"); var $selectedoptions = $(".lies").find("option[value='" + contact + "']"); $selectedoptions.prop("disabled", true);     $lies.val(""); $currentstoryline.fadeout(); $("#" + contact).fadein();