How can I add multiple spoil alerts on the same page?

Question

I have tried to have multiple spoil alerts, but I can't figure out the problem. I click on first span/button and both spoil alerts comes up.... Here is my HTML:

    <p class="answer1">
        <!--Spoiler:-->
        <span>What does Santa Cruz have that Pismo Beach doesn't?<br>Answer: Santa Cruz has Monarch Butterfly Tour. </span>
    </p>
        <p class="answer2">
        <!--Spoiler:-->
        <span>Which state has the largest population in the US?<br>Answer: California with 8 million people. </span>
    </p>

Below is my jQuery code:

//Prevent spoilerphobes from seeing spoilers
//Solution: Hide spoilers and reveal them through user interaction

//1, Hide spoiler
$(".answer1 span").hide();
//2, Add a button
$(".answer1").append("<span id="museum">What does Santa Cruz have that Pismo Beach doesn't?<br> [press here for answer]</span>");

//3, When button pressed
$("span").click(function(){
  //3.1, Show spoiler
  $(".answer1 span").show();
  //3.2, Get rid of button
  $(this).remove();
});

//Prevent spoilerphobes from seeing spoilers
//Solution: Hide spoilers and reveal them through user interaction

//1, Hide spoiler
$(".answer2 span").hide();
//2, Add a button
$(".answer2").append("<span id="ca">Which state has the largest population in the US?<br> [press here for answer]</span>");

//3, When button pressed
$("span").click(function(){
  //3.1, Show spoiler
  $(".answer2 span").show();
  //3.2, Get rid of button
  $(this).remove();
});

I've added the id element to the span.. I tried this several times and it didn't work... Where should I add "#museum span"? Secondly, do I remove "this" from last line for remove() and replace with unique ID element?

Answer 1 · 2017-01-26T01:17:12Z

January 26, 2017 1:17am

You could identify each button and spoiler uniquely.

Instead of attaching the same event handler to both based on the span tag, you could have separate handler attached to each one individually.

You can distinguish the elements several ways, including assigning each one a unique ID or class. Then you can use the unique feature as the selector, replacing the tag name entirely.

In future, be sure to format any code using the instructions from the Markdown Cheatsheet found below "Add an Answer".

Welcome to the Treehouse Community

Looking to learn something new?

Daniel Scalia

Daniel Scalia

How can I add multiple spoil alerts on the same page?

William Li

William Li

1 Answer

Steven Parker

Steven Parker

You could identify each button and spoiler uniquely.

Steven Parker

Steven Parker

It looks like you revised your code.

Daniel Scalia

Daniel Scalia