Question

As you can see from the code below I am attempting to pop up “revealFootNote” when “note” is clicked. That works fine but I have 10 foot notes and when I click on any of them they all pop up. Each footnote has a unique ID of “one”, “two” … “ten” I need for only the relevant footnote to pop-up when that particular class is clicked. If I replace .note with #one it still works but it pops up #one for any class clicked.

$(document).ready(function(){                                               
    $(".note").click(function() {;
        $(".footNote").toggleClass("revealFootNote");
    });
    $(".footNote").click(function() {;
        $(this).toggleClass("revealFootNote");
    });
});

Help! I am 2 days into learning jQuery.

Thank you,
Taliesin

So, the end result after all the help you guys gave me:

$(".note, .revealFootNote").click(function() {
    if ($(this).hasClass('note')) {
        $('#'+$(this).data('target')).toggleClass("revealFootNote");
    } else {
        $(this).hide();
    }
});
    $(".footNote").click(function() {;
        $(this).toggleClass("revealFootNote");
});

Answer 1

HTML

<ul>
    <li>Running speed<span class="note" data-target="nine">9</span></li>
    <li>Ki<span class="note" data-target="ten">10</span></li>
    <li>ESP<span class="note" data-target="eleven">11</span></li> 
</ul> 

<aside class="footNote" id="nine"> The average human can run 7.5 miles per hour. </aside> 
<aside class="footNote" id="ten"> Ki and ESP points can be further modified with the use of skills or alchemical substances. </aside>
<aside class="footNote" id="eleven"> Footnote Eleven </aside>

jQuery

$(document).ready(function($) {
    $(".note, .footNote").click(function() {
        if ($(this).hasClass('note')) {
            $('#'+$(this).data('target')).show();
        } else {
            $(this).hide();
        }
    });
});