Help with character counter

Hello everyone. I wonder if anyone can help?

I found a character counter on the web and it works if used as is:

<script language="JavaScript">
function countit(what){
formcontent=what.form.charcount.value
what.form.displaycount.value=formcontent.length
}
</script>



<input type="text" name="charcount" size="40" >
<input type="button" onClick="countit(this)" value="Count" style="font-weight:bold;">
<input type="text" name="displaycount" size="3" style="font-weight:bold; text-align:center;">

***DOES NOT ALLOW ME TO LINK AN IMAGE***

What I want to do is have the character counter on each of the 3 form input lines below instead of having it above the 3 lines (which at the moment means the customers would have to use the counter at the top and then either cut/paste or re-type the counted text into Line1, Line2 and Line 3).

I have tried doing this but (although the button does render at the side of each field) nothing works character counting wise.

To better understand, please add this (DOES NOT ALLOW ME TO LINK TO A PAGE....) test product to the cart and get to checkout page 2 to see what I mean.

I would really appreciate it if someone could get this to work. Thanks.

Are you talking about something like this?