List posts by month with specific HTML markup - Wordpress

List posts by month with specific HTML markup - Wordpress

Basically I want to display the posts by month in this format. I have
Googled and searched on this site for hours, but I cannot find a solution
that is exactly what I want. Any help is greatly appreciated. Thanks!
What I am trying to do in HTML -
<!--JUNE-->
<a href="#" class="trigger current">June 2013</a>
<div class="pane wdiv">
<ul>
<li>Post Title</li>
<li>Post Title</li>
</ul>
<ul>
<li>Post Title</li>
<li>Post Title</li>
</ul>
<ul>
<li>Post Title</li>
<li>Post Title</li>
</ul>
<div style="clear:both;"></div>
</div>
<!--May-->
<a href="#" class="trigger current">May 2013</a>
<div class="pane wdiv">
<ul>
<li>Post Title</li>
<li>Post Title</li>
</ul>
<ul>
<li>Post Title</li>
<li>Post Title</li>
</ul>
<ul>
<li>Post Title</li>
<li>Post Title</li>
</ul>
<div style="clear:both;"></div>
</div>
What I have tried and played around with for the past 3 hours with no luck -
<?php global $post;
$args = array( 'numberposts' => 5,);
$myposts = get_posts( $args );
foreach( $myposts as $post ) : setup_postdata($post); ?>
<?php the_date('F Y','<a href="#" class="trigger current">','</a>'); ?>
<div class="pane wdiv">
<ul>
<li><a href="<?php the_permalink(); ?>"><?php the_title();
?></a></li>
</ul>
<div style="clear:both;"></div>
</div>
<?php endforeach; ?>
What is being displayed
<!--JUNE-->
<a href="#" class="trigger current">June 2013</a>
<div class="pane wdiv">
<ul>
<li>Test Post</li>
</ul>
<div style="clear:both;"></div>
</div>
<div class="pane wdiv">
<ul>
<li>Test Post2</li>
</ul>
<div style="clear:both;"></div>
</div>
<!--May-->
<a href="#" class="trigger current">May 2013</a>
<div class="pane wdiv">
<ul>
<li>Awesome Video</li>
</ul>
<div style="clear:both;"></div>
</div>
<div class="pane wdiv">
<ul>
<li>Recommended Readings</li>
</ul>
<div style="clear:both;"></div>
</div>
<div class="pane wdiv">
<ul>
<li>Recommended Readings</li>
</ul>
<div style="clear:both;"></div>
</div>