JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sound-bars">
<div id="one" class="bars"></div>
<div id="two" class="bars"></div>
<div id="three" class="bars"></div>
</div>

<audio id="sound-1">
	<source src="http://angelaandtom.co.uk/lib/audio/Intro-.mp3"></source>
	<source src="http://angelaandtom.co.uk/lib/audio/Intro-.oggvorbis.ogg"></source>
	Your browser isn't compatible.
</audio>
<audio id="sound-2">
	<source src="http://angelaandtom.co.uk/lib/audio/you did not listen .mp3"></source>
	<source src="http://angelaandtom.co.uk/lib/audio/you did not listen .oggvorbis.ogg"></source>
	Your browser isn't compatible.
</audio>
<audio id="sound-3">
	<source src="http://angelaandtom.co.uk/lib/audio/can you hear me .mp3"></source>
	<source src="http://angelaandtom.co.uk/lib/audio/can you hear me .oggvorbis.ogg"></source>
	Your browser isn't compatible.
</audio>

CSS

.bars {
    width: 200px;
    height: 20px;
    margin: 10px;
    background-color: black;
}

JavaScript

$("#one").mouseenter(function () {
    $('#sound-1').get(0).play();
});
$("#one").mouseleave(function () {
    $('#sound-1').get(0).pause();
});
$("#two").mouseenter(function () {
    $('#sound-2').get(0).play();
});
$("#two").mouseleave(function () {
    $('#sound-2').get(0).pause();
});
$("#three").mouseenter(function () {
    $('#sound-3').get(0).play();
});
$("#three").mouseleave(function () {
    $('#sound-3').get(0).pause();
});