How do I add counter to html listbox using jquery

Hello
I am using the attached jquery to populate select listbox1 to select listbox2. The idea is when a user adds items to listbox2 from listbox1 a counter will increment to show how many items were added. Likewise, when a user removes items from listbox2, it decrements the counter.

I would appreciate some help with this as I have never done a counter in jquery. Thanks

jquery code

<script>
		$(function () {
			$('.switch-item').click(function (e) {
				e.preventDefault();
				var src = $(this).data('src');
				var dst = $(this).data('dst');
				var sel = $('#' + src + ' option:selected').detach();
				$('#' + dst).append(sel);
				
			});
			
			$('form').submit(function () {
				if ($('#boxdest2').children().length == 0) {
    			//alert('You must enter box(es) for destruction');
					notif({
						type: "NewBoxError",
						msg: "You must enter box(es) for destruction",
						height: 99,
						position: "top",
						fade: true
						
					});
					return false;
				}
				$('#boxdest2 option').prop({
					selected: true
				});
			});
			
		});
	</script>

html code

<select name="boxdest[]" id="boxdest" size="7" multiple="multiple">

<?php
	$i=0;
	while($row = mysql_fetch_array($result)) {
?>
	<option value="<?php echo $row["custref"];?>"><?php echo $row["custref"];?></option>
<?php
	$i++;
	}
?>
	</select>
	<span style="display: inline-block; width: 70px; height: 82px; padding-left: 10px; padding-right: 10px; vertical-align: top;margin-top:35px;">
         <button class="btn btn-primary switch-item" data-src="boxdest" data-dst="boxdest2">&gt;</button>
    	 <button class="btn btn-primary switch-item" data-dst="boxdest" data-src="boxdest2">&lt;</button>
	  </span>
	  <select name="boxdest2[]" id="boxdest2" size="7" multiple="multiple"></select>