Well, it's too early in the morning for me to verify functionality of code, but one thing that does stick out is that you're using the jQuery "$()" shorthand.
Use of the "$" character on
JSF templates is tricky because "$", like "#" is meaningful to the EL parser and therefore may result in effectively mangling the page logic. You
can use "$()" if you adhere to certain rules, but I find it less troublessome to simply use the "jQuery()" form, instead.
Some things that in general will help protect you for embedded scripts are to fully protect the scripts themselves. Like so:
Here's a breakdown.
1. The "verbatim" tag tells JSF not to try and interpret the verbation tag's body as JSF. This used to be more important in JSF version 1, but it's still not a bad idea.
2. The "CDATA" XML escape tells the XML parser NOT to interpret any XML constructs within the CDATA. This is especially important in Javascript, since the "less-than" and "greater-than" operators look like broken XML tags and the ampersand, quote and apostrophe characters carry risks as well.
3. The "//" beginning the close of script is a Javascript comment marker so that the JavaScript parser won't mistakenly attempt to parse the closing tags as JavaScript. Especially the close of the CDATA which otherwise resembles a broken fragment of some bizarre array expression.
It's safer and easier to put your CSS and Javascript elements into a separate included resource where all that escaping isn't needed, but I'll confess that when I'm doing quick-and-dirty stuff I slap it all down directly on the page under development. Suitably escaped, of course.