Find the jQuery Bug #8: Problem

_snippet.html

<form id="personForm" name="personForm" method="post" 
    action="/Demo/jsf/main.jsf;jsessionid=0596FB948C236D0FFC162223" 
    enctype="application/x-www-form-urlencoded">
    <div class="field">
        <label>Last Name</label>
        <input id="personForm:lastname" 
            name="personForm:lastname" type="text" />
    </div>
    <div class="field">
        <label>First Name</label> 
        <input id="personForm:firstname" 
            name="personForm:firstname" type="text" />
    </div>
    <div class="field">
        <label>Address</label>
        <input id="personForm:address" 
            name="personForm:address" type="text" />
    </div>
    <!-- ... more HTML ... -->
</form>

_snippet.js

// <input id="person.name" name="person.name" type="text" />
$( "#person.name" ).addClass( "highlight" ); // Fail

// <input id="person:name" name="person:name" type="text" />
$( "#person:name" ).addClass( "highlight" ); // Fail

// <input id="person$name" name="person$name" />
$( "#person$name" ).addClass( "highlight" );​ // Fail

fiddle.js

$( document ).ready( function() {
    $( "#personForm:firstname" ).addClass( "required" );
});