JSFiddle - React, Tailwind, and code Playground

HTML

<img id="image1" src="https://www.rocketdogrescue.org/wp-content/uploads/2013/09/DSC_0718.png" width="400px">
<img id="image2" src="https://www.rocketdogrescue.org/wp-content/uploads/2013/09/lightening.jpg" width="400px">
<img id="image3" src="https://www.rocketdogrescue.org/wp-content/uploads/2013/09/pet-food-express.jpg" width="400px">

<audio id="sound1" preload="auto" loop="loop"> <source src="http://soundbible.com/mp3/Dogs Barking-SoundBible.com-625577590.mp3">

<audio id="sound2" preload="auto" loop="loop"> <source src="http://soundbible.com/mp3/Dog Woof-SoundBible.com-457935112.mp3">

<audio id="sound3" preload="auto" loop="loop"> <source src="http://soundbible.com/mp3/dog-howling-yapping-daniel_simon.mp3">

JavaScript

var i;
for (i = 1; i<=3; i++){
var barking = $("#sound"+i)[0];
$("#image"+i).mouseenter(function(){
barking.play();});

$("#image"+i).mouseleave(function(){
barking.pause();});

console.log(i);
console.log(barking);
}