JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<ul id="nav-two" class="nav">
		   <li>
		   	<a href="#" class="beep">Главный</a>
		   	<audio id="beep-two" controls preload="auto">
				<source src="http://soundclan.myjino.ru/html-nav-sound/audio/nav-sound-1.mp3" controls></source>
				<source src="http://soundclan.myjino.ru/html-nav-sound/audio/nav-sound-1.ogg" controls></source>
				Ваш браузер не поддерживает замечательный элемент &lt;audio&gt;.
			</audio>
			</li>
		   <li><a href="#" class="beep">О нас</a></li>
		   <li><a href="#" class="beep">Клиенты</a></li>
		   <li><a href="#" class="beep">Связаться с нами</a></li>
		</ul>

JavaScript

$("#nav-two a")
  .each(function(i) {
    if (i != 0) { 
      $("#beep-two")
        .clone()
        .attr("id", "beep-two" + i)
        .appendTo($(this).parent()); 
    }
    $(this).data("beeper", i);
  })
  .mouseenter(function() {
    $("#beep-two" + $(this).data("beeper"))[0].play();
  });
   
$("#beep-two").attr("id", "beep-two0");

//Событие по клику
$('.beep').bind('click', function(){

$("#beep-two" + $(this).data("beeper"))[0].play();
 
});