Disable selected options based on the user's decision

Issue

I'm trying to create an open environment for the user to choose a particular option, yet at the same time give them the open opportunity to choose them in any order, yet eliminating the choices they've chosen. My code so far stops me in my tracks when executing them out of order. Basically the select and option pops up within a span. they choose one. an outcome is delivered within that span and the same option appears yet eliminating the one they've already chosen.

Here's the HTML code

<div><select id="lies">
<option value="" selected='selected'>Select a lie...</option>
<option value="FBI">We're undercover agents</option>
<option value="super">We're superheroes</option>
<option value="confess">We're the bombers</option>
</select></div>

<span id='FBI'>
<p>"We're undercover students working with the FBI," you say.</p>
<p>"Get outta here before I put you both in cuffs!" he yells.</p>
<p>"Good job, <?php echo $_GET['Name']?>! You almost got us busted.."   </p>
<p>"Come on, Korra, let's try one more! Over there!" you exclaim.</p>
<div><select id="lies">
<option value="" selected='selected'>Select a lie...</option>
<option value="FBI">We're undercover agents</option>
<option value="super">We're superheroes</option>
<option value="confess">We're the bombers</option>
</select></div>
</span>

<span id='super'>
<p>"Let us through, we're bulletproof!" you fearlessly say.</p>
<p>"Are ya now?" asks the cop as he lightly bops you over the head with his fist.</p>
<p>"OW!" you yell.</p>
<p>"Run along and go play somewhere else, stupid kid!"</p>
<p>You and Korra walk away feeling defeated.</p>
<p>"Any other ideas, <?php echo $_GET['Name']?>?" she asks.</p>
<p>"One more try!" you say as you run over to another police officer.</p>
<div><select id="lies">
<option value="" selected='selected'>Select a lie...</option>
<option value="FBI">We're undercover agents</option>
<option value="super">We're superheroes</option>
<option value="confess">We're the bombers</option>
</select></div>
</span>

<span id='confess'>
<p>"It was us!"</p>
<p>"Alright off to jail you go!" says the officer.</p>
You get escorted off to jail. THE END.
</span>

and here is the jQuery

//Keeps the spans containing the respondes hidden until an option is selected for the lietocops page

$('#lies').change(function(){
var contact = $(this).val();

// Hides the 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();
 }
});

Solution

First, you have a problem with multiple IDs, that's not allowed. You need to make them classes.

And give your storylines a class as well (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();

Answered By - Zoran P.