Php sitede bir sonraki divi seçme

Merhaba,

Alt Alta foreach ile listelediğim 5 td var bunların içerisinde hepsinde id değeri farklı. Aşağıda tıkladığım butondaki müzik çalıyor benim istediğim hangi butona tıklarsam bir sonraki butonun id seçmek bunu jquery ile nasıl yakalarım acaba?

<button class="button" id="PQ1QCGvNum1"> Şimdi Müzik Çal</button>

<button class="button" id="PQ1QCGvNuwww"> Şimdi Müzik Çal</button>

<button class="button" id="PQ1QCGvsadas"> Şimdi Müzik Çal</button>

<button class="button" id="PQ1QCGvwwed"> Şimdi Müzik Çal</button>

<button class="button" id="PQ1QCGvkokk"> Şimdi Müzik Çal</button>

telefondan anca bu kadar yazdım yanlış ola bilir

<td dbclik="calis(this.value)" value="bura id gelen değişik verileri yaz aşağıdaki fonksiyon çalışır">

bu js kodu
function calis(gelen)
{
alert(gelen);

}

<button class="button" id="PQ1QCGvNum1"> Şimdi Müzik Çal</button>
<button class="button" id="PQ1QCGvNuwww"> Şimdi Müzik Çal</button>
<button class="button" id="PQ1QCGvsadas"> Şimdi Müzik Çal</button>
<button class="button" id="PQ1QCGvwwed"> Şimdi Müzik Çal</button>
<button class="button" id="PQ1QCGvkokk"> Şimdi Müzik Çal</button>
<!-- get jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<script>
    $(document).on("click",".button",function (e) {
        e.preventDefault();
        $this = $(this); // tıklanan buton
        var next = $this.next(); // bir sonraki element
        if(next.hasClass("button")){ // eğer bir sonraki elementte .button classı var ise
            console.log("next",next);
        }
        var prev = $this.prev(); // bir önceki element
        if(prev.hasClass("button")){ // eğer bir önceki elementte .button classı var ise
            console.log("prev",prev);
        }
    });
</script>

@Adalente; https://ardakarakas.com/divexample.php böyle bir şey mi istemiştiniz?

https://api.jquery.com/next/ ile seçebilirsiniz.

Aşağıdaki gibi birşey yaptım ama olmadı. şimdi 1 numaralı şarkı başladı ve bitti 2. sıraya geçmeli o bitti 3 geçmeli taki müdahele olana kadar sağlamak istediğim bu.

Aşağıdaki kodda değer değişmiyor ve her seferinde click olmayacak sadece başladığında olacak bunu nasıl sağlarım

<button  num="1" class="button" id="PQ1QCGvNum1"> Şimdi Müzik Çal</button>
<button num="2"  class="button" id="PQ1QCGvNuwww"> Şimdi Müzik Çal</button>
<button num="3"  class="button" id="PQ1QCGvsadas"> Şimdi Müzik Çal</button>
<button num="4"  class="button" id="PQ1QCGvwwed"> Şimdi Müzik Çal</button>
<button num="5"  class="button" id="PQ1QCGvkokk"> Şimdi Müzik Çal</button>
<!-- get jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
<script>
                $(".button").on("click", function() {
                var vidID = $(this).attr('id');
                var id = $(this).attr('num');
                player.loadVideoById(vidID, 0, "default");
                $("#playAudio").addClass("pause");
                let topla = id++;
                let son = topla + 1;
                var deger = document.querySelector('[num="'+son+'"]');
                function onPlayerStateChange(event) {
                if (event.data == YT.PlayerState.ENDED) {
                player.loadVideoById(deger.id);

                }
                }
                });

</script>