JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="content">
  <div class="sound">
    sound
    <audio id="audio" type="audio/mp3">
      <source src="http://www.freesfx.co.uk/rx2/mp3s/11/12828_1448266837.mp3">
    </audio>
  </div>
   <div class="sound">
    sound
    <audio id="audio" type="audio/mp3">
      <source src="http://www.freesfx.co.uk/rx2/mp3s/11/12828_1448266837.mp3">
    </audio>
  </div>
  

  <div class="stop">
    stop
  </div>
  <div class="move">
  </div>
</div>

<button id="go">
  go div
</button>

CSS

.content {
    width: 500px;
    height: 500px;
    margin: 10px;
    border: 10px solid green;
    background:brown;
    overflow-x:scroll;
    padding:10px;
    position: relative;
}

.stop{
  float:right;
  background:yellow;
}

.sound{
  float:left;
  background:orange;
  margin-left:100px;
}

.move{
  left:0;
  background:yellow;
  height:100%;
  width:10px;
  opacity:0.2;
position: absolute;
}

JavaScript

$( "#go" ).click(function() {
  var stop = $(".stop").offset().left;
  var obj = document.getElementById("audio"); 
  
  // how to say whenever .move div arrives at .sound element, the sound associated to that .sound div starts to play?
  //obj.play(); 
  $( ".move" ).animate({
    opacity: 0.25,
    left: stop-($(".stop").width()+$(this).width()),
  }, 5000, function() {
    $(this).css('left',0);
    $(this).css('height','100%');
     
  });
});