Use jQuery to find next element by class

Using this HTML:

<p>
	<div><a class="catmenu" href="#">Category 1</a></div>
	<div class="submenu" id="submenu1">
		<a href="0">0</a><br>
		<a href="1">1</a><br>
		<a href="2">2</a><br>
		<a href="3">3</a></div>
</p>

Select allOpen in new window

I'm trying to make it so when you click a class="cat menu" I can do something with the next class="submenu". I tried this:

<script language="javascript" type="text/javascript">
	$(function(){
		$(document).on('click', '.catmenu', function(){
			var ul=$(this).nextAll('.submenu');
			console.log('ID = '+ul.attr('id'));
		});
	})
</script>

Select allOpen in new window

There are multiple menus like this in my HTML, so I want to control all of them with the same script. My console log is just to figure out if I've selected the DIV with class="submenu" or not.

Thank you!