How do make a button find an id name
<p>I'm wanting to click a button and have the matching id name show. I don't know how to use contains, has, or filter to make this work. Basically, click a button find it's id name. Then, if it's id name matches one in nameList show only that id.</p>

<p>Second question. There has to be a better way to call all the buttonNames than the way I'm doing with variable bn.</p>

<pre><code>&lt;/head&gt;
&lt;body&gt;
    &lt;div = "list"&gt;
        &lt;ul class = "nameList"&gt;
            &lt;li id ="Heather"&gt;Heather&lt;/li&gt;
            &lt;li id ="Cruz"&gt;Cruz&lt;/li&gt;
            &lt;li id ="Donny"&gt;Donny&lt;/li&gt;
            &lt;li id ="Jimmy"&gt;Jimmy&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div = "buttonList"&gt;
        &lt;form class = "buttonNames"&gt;
            &lt;input type = "button" id = "Heather" value ="Heather"/&gt;
            &lt;input type = "button" id = "Cruz" value ="Cruz"/&gt;
            &lt;input type = "button" id = "Donny" value ="Donny"/&gt;
            &lt;input type = "button" id = "Jimmy" value ="Jimmy"/&gt;
        &lt;/form&gt;
    &lt;/div&gt;

    &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
    // JavaScript Document
    google.load("jquery", "1.6.2");
    google.setOnLoadCallback(function(){
        $('.nameList').hide();

/*      $(nameList).each(function(i) { 
            var i = $(this).text();
            console.log("i = " + i);
        });*/

        //var buttons = $('#Heather, #Cruz, #Donny, #Jimmy');
        var bn = $('.buttonNames').children();
        console.log(bn);

        $(bn).click(function() {
            console.log("You have clicked Button = " + $(this).attr('id'));
            var t = $(this).attr('id');
        });

    });

    &lt;/script&gt;    
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
