Adding play buttons for all audio tags on a page

I want to add a play button for each audio file on a page. Therefore I added a button with an indexed classname under each audio-tag, but now I don't know how to proceed and bind the click event to the buttons. Maybe there's a much more elegant approach in general …

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<audio id="myaudio" src="http://www.soundjay.com//mechanical/gun-cocking-01.mp3">
</audio>

<audio id="myaudio" src="http://www.soundjay.com//mechanical/gun-cocking-02.mp3">
</audio>

$( "audio" ).each(function( index ) {
   $( '<button class=audioButton"' + index + '">Play Clip #' + index + '</button>' ).insertAfter( this );
});

$("button").on("click", playTest);