title: How to get the next element in a div with a specific Id
body: <p>fairly new to js, so trying to get the basics.</p>
  
  <p>I have a project in which I have a div with a list of songs:</p>
  
  <pre><code>&lt;div id="songs"&gt;
    &lt;p&gt;01 a la verticale &lt;span class="title"&gt;[play]&lt;/span&gt;&lt;/p&gt;
    &lt;audio class="song" id="verticale" src="Songs/01_a_la_verticale.mp3" onended="audioEnd()"&gt;&lt;/audio&gt;
  
    &lt;p&gt;02 éphémère &lt;span class="title"&gt;[play]&lt;/span&gt;&lt;/p&gt;
    &lt;audio class="song" id="ephemere" src="Songs/02_ephemere.mp3" onended="audioEnd()"&gt;&lt;/audio&gt;
  
    &lt;p&gt;03 geste humain &lt;span class="title"&gt;[play]&lt;/span&gt;&lt;/p&gt;
    &lt;audio class="song" id="geste" src="Songs/03_geste_humain.mp3" onended="audioEnd()"&gt;&lt;/audio&gt;
  
    &lt;p&gt;04 la seule chose &lt;span class="title"&gt;[play]&lt;/span&gt;&lt;/p&gt;
    &lt;audio class="song" id="chose" src="Songs/04_la_seule_chose.mp3" onended="audioEnd()"&gt;&lt;/audio&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In my html, every p tag has a span inside it with "play" written on it, and I am trying to implement that functionality.</p>
  
  <p>I know how to use .play and .pause etc... but my problem is how to get to the audio element for the song clicked. Here is what I have tried:</p>
  
  <p><strong>jQuery :</strong></p>
  
  <pre><code>  $(".title").click(function() {
        var myAudioElement = $(this).parent().next("#song");
        var myId = myAudioElement.attr('id');
  
        alert(myId);
  });
  </code></pre>
  
  <p>All I want is to get to the element for now. My logic is that the tag span is inside the p tag so, starting from the clicked span I need to get to its parent first (the p tag) and then next() with the argument "song" will give me the next element (audio) in the div with the id of song. </p>
  
  <p>But the alert box comes back with "undefined". </p>
  
  <p>What am I doing wrong?</p>