jquery selector within a selector

Question

I have used JQuery some, but I am still learning. What I am trying to do is have a PHP list (eventually of about 20 items), but I only need to show however many the user needs. What I want to do is add a button on the end that shows the next section.

This is what I have so far:

<script src="jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
    $('.list').hide();
    $('#first').show();

    $('.list').click(function(){
        $(this).next('.list').show();

    });
});





</script>

<?php

echo "<div class='list' id='first'>First<button class='buttonlist'>Show Next</button></div>
<div class='list'>Second <button class='buttonlist'>Show Next</button></div>
<div class='list'>Third <button class='buttonlist'>Show Next</button></div>
<div class='list'>Fourth<button class='buttonlist'>Show Next</button></div>

     ";
?>

This currently works, however if an input box is added then the next section shows up when that input is selected. How can I do this so that the user can click on the button, and the next one shows up? I know that the PHP here is unnecessary but when I am finished this will be done using a loop.

Answer 1

Change this

$('.list').click(function(){
    $(this).next('.list').show();

});

to

$('.buttonlist').click(function () {
    $(this).parent().next('.list').show();
});