JSF javascript adicionar caracteres restantes ao textarea

Programação Java
#1

Estou tentando adicionar um javascript para contar linhas restantes no text area, mas sem sucesso.
demo2.xhtml
<?xml version="1.0" encoding="ISO-8859-1" ?>

<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>testarea</title>
</h:head>


 
    <h:body>
    <script type="text/javascript" 
  	src="/JavaServerFaces/faces/javax.faces.resource/common.js?ln=js">
	</script>
    
    
     
    	<h1>JSF 2 textarea example</h1>
 
		<h:form>
			<table>
    		<tr>
    			<td valign="top">Address :</td>
    			<td><h:inputTextarea value="#{user.address}" rows="10" id="textarea"  cols="30" maxlength="10"/></td>
    			<td><div jsf:id="textarea_feedback"/> </td>
    		</tr> 
    		</table>
    		<h:commandButton value="Submit" action="user" />
    	</h:form>
 
    </h:body>
</html>

user.xhtml

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core">

<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>testarea</title>
</h:head>


 
    <h:body>
    	<h1>JSF 2 textarea example</h1>
 
		Address : <h:outputText value="#{user.address}" />
    	
    </h:body>
</html>

common.js
$(document).ready(function() {
var text_max = 99;
$(’#textarea_feedback’).html(text_max + ’ characters remaining’);

    $('#textarea').keyup(function() {
        var text_length = $('#textarea').val().length;
        var text_remaining = text_max - text_length;

        $('#textarea_feedback').html(text_remaining + ' characters remaining');
    });
});

http://tinypic.com/view.php?pic=1zftwk4&s=9

1zftwk4.jpg874×439

UserBean.java
package com.marcel.model;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import java.io.Serializable;
 
@ManagedBean(name="user")
@SessionScoped
public class UserBean implements Serializable {
 
	private String address;

	public String getAddress() {
		return address;
	}

	public void setAddress(String address) {
		this.address = address;
	}

}

Tentei seguir daqui:
https://jsfiddle.net/timur/47a7A/

#2

Tentei desta forma:
common.js
$(document).ready(function(){
$(“textarea”).bind(“input keyup paste”, function (){
var maximo = 100;
var disponivel = maximo - $(this).val().length;
if(disponivel < 0) {
var texto = $(this).val().substr(0, maximo);
$(this).val(texto);
disponivel = 0;
}
$(".contagem").text(disponivel);
});
});

    demo2.xhtml     
    	<?xml version="1.0" encoding="ISO-8859-1" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"
    	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    	xmlns:h="http://xmlns.jcp.org/jsf/html"
    	xmlns:f="http://xmlns.jcp.org/jsf/core"
    	xmlns:jsf="http://xmlns.jcp.org/jsf">

    <h:head>
    	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    	<title>testarea</title>
    	 
       
    </h:head>

    	<h:body>
     
       <script type="text/javascript" 
      	src="/JavaServerFaces/faces/javax.faces.resource/common.js?ln=js">
    	</script>


     
    	<h1>JSF 2 textarea example</h1>
     
    		<h:form>
    			<table>
    		<tr>
    			<td valign="top">Address :</td>
    			<td><h:inputTextarea value="#{user.address}" rows="10" id="textarea"  cols="30" />
    			
    			Caracteres Restantes: <span class="contagem">100</span></td> 
    		</tr> 
    		</table>
    		<h:commandButton value="Submit" action="user" />
    	</h:form>
     
    </h:body>
    </html>

Mas o 100 ficou estático:
image