Clearing fields

Clearing fields

Hi, Im having trouble trying to clear the values of this click program. Basically if you click the pictures of the monkeys a counter will count the number of clicks. I created <div> elements next to every counter, but my on click function for my button wont work. Please help. Thanks

$(document).ready(function() {
var clickw = null;
var clickf = null;
var clickg = null;
var clickm = null;


$('#wrop').click(function(){
$('#wrop_count').html((clickw++));
$('#totalmonkey').html(clickw);
});

$('#ftang').click(function(){
$('#ftang_count').html(clickf++);
$('#totalmonkey').html(clickf);
});
$('#grunz').click(function(){
$('#grunz_count').html(clickg++);
$('#totalmonkey').html(clickg);
});
$('#mirg').click(function(){
$('#mirg_count').html(clickm++);
$('#totalmonkey').html((clickm));
});
});
</script>
</head>
<body>
<h1>Evil Space Monkeys</h1>
<h2>By Isaac Masasabi</h3>

<table>
<td align="center">

<img id="wrop" src="wrop.png" alt="Wrop" title="Wrop"><br>
Wrop<br>
Count: <span id="wrop_count"><div class="bongo">0</div></span>
</td>
<td align="center">
<img id="ftang" src="ftang.png" alt="Ftang" title="Ftang"><br>
Ftang<br>
Count: <span id="ftang_count"><div class="bongo">0</div></span>
</td>
<td align="center">
<img id="grunz" src="grunz.png" alt="Grunz" title="Grunz"><br>
Grunz<br>
Count: <span id="grunz_count"><div class="bongo">0</div></span>
</td>
<td align="center">
<img id="mirg" src="mirg.png" alt="Mirg" title="Mirg"><br>
Mirg<br>
Count: <span id="mirg_count"><div class="bongo">0</div></span>
</td>
</table>
<p>Total number of of monkeys:<span id="totalmonkey"><div class="bongo">0</div></span></p>

<button type=reset id="epanza" onclick="$('.bongo').html('')">Clear</button>