Show/Hide using JQuery in PHP page

Question

I have this code below. I am trying to show/hide everything between the #info id. Nothing happens when I click the buttons. Where am I going wrong?

echo '<script>
      $( "#show' . $row['id'] . '" ).click(function() {
      $( "#info' . $row['id'] . '" ).first().show( "fast", function showNext() {
      $( this ).next( "#info' . $row['id'] . '" ).show( "fast", showNext );
      });
      });

      $( "#hide' . $row['id'] . '" ).click(function() {
      $( "#info' . $row['id'] . '" ).hide( 1000 );
      });
      </script>';

echo '<tr><th><button id="show' . $row['id'] . '">Show</button></th>
      <th><button id="hide' . $row['id'] . '">Hide</button></th>';

echo '<div id="info' . $row['id'] . '"><td>L O L</td></div></tr>';

Answer 1

the script is called before the DOM - Element exists. Do you have some console logs/errors ? Try to first add the element and then the script tag