Need help to debug jQuery char counter logic
<p>I have a textarea with a counter below that counts input characters. There is a maximum input limit set as well. I also added couple of spans that insert values into that textarea too when they are clicked. </p>

<pre><code>&lt;span id="tag1" class="tags"&gt;&lt;/span&gt;
&lt;span id="tag2" class="tags"&gt;&lt;/span&gt;
&lt;br&gt;
&lt;textarea id="myTextArea"&gt;&lt;/textarea&gt; 
&lt;br&gt;
Counter: &lt;font id="charCount"&gt;&lt;/font&gt;
</code></pre>

<p>The content in the spans contains a numeric value, like (10). When the value is inserted into textarea I need the counter to increase by that value and not by the char count in the insert.</p>

<p>Currently some of it works and some not. Need help putting it together. I put my  code here: <a href="http://jsfiddle.net/8R9DH/11/" rel="nofollow">http://jsfiddle.net/8R9DH/11/</a></p>

<hr>

<p>EDIT: </p>

<p>Expected behavior:</p>

<ol>
<li>Input into text area can be done via typing in directly or by clicking on of the spans or a combination of both</li>
<li>Counter counts all characters up to a max and stop input once the limit is reached</li>
<li><p>Counter counts each character and space entered manually but when an insert is user the counter is increased by the numeric value contained in the include. Eg. 
    <strong><em>&lt;text include (5)></em></strong> == 5 or <strong><em>&lt;text include (10)></em></strong> == 10
For example, the following input should be counted as 13 characters:</p>

<pre><code>&lt;textarea id="myTextArea"&gt;abc &lt;text insert (5)&gt; 123&lt;/textarea&gt;
</code></pre></li>
</ol>
