Javascript/jQuery: How to increment a number and highlight text when selected
<p>I've searched and search, but cannot find what I need. I know very little about Javascript so I need a bit of help with this.</p>

<p>I have a number, say numValue, that I want to increase or decrease based on items being selected in different areas. Plus I want those items to highlight and stay highlights until clicked again. When selected I want numValue to decrease by 1 and when deselected I want numValue to increase by 1. </p>

<p>Example:</p>

<p><strong>50</strong> (numValue)</p>

<p>Group 1 </p>

<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>

<p>Group 2</p>

<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>

<p>So if I click on Group 1/Option 1 and Option 2 plus Group 2/Option 3 I want the numValue to decrease by 3 (for 3 selected options). I want each item to stay selected when clicked not deselect when another option is clicked. Then deselect when clicked a second time. So it becomes:</p>

<p><strong>47</strong> (numValue)</p>

<p>Group 1 </p>

<ul>
<li><strong>Option 1</strong></li>
<li><strong>Option 2</strong> </li>
<li>Option 3</li>
</ul>

<p>Group 2</p>

<ul>
<li>Option 1</li>
<li>Option 2</li>
<li><strong>Option 3</strong></li>
</ul>

<p>Can anyone point me in the right direction? </p>
