jQuery Traversing

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        body { font-family: sans-serif; padding: 20px; background: #f8fafc; }
        ul { list-style: none; padding: 0; }
        li { padding: 10px 14px; margin: 4px 0; background: white; border: 1px solid #cbd5e1; border-radius: 6px; }
        .highlight { background: #dcfce7 !important; border-color: #22c55e !important; font-weight: bold; }
        button { background: #0d2e5c; color: white; border: none; padding: 8px 14px; border-radius: 6px; cursor: pointer; margin-right: 5px; }
    </style>
</head>
<body>
    <h3>Traversing Lanjutan</h3>
    <ul id="daftarItem">
        <li>Item Indeks 0 (first)</li>
        <li>Item Indeks 1</li>
        <li class="spesial">Item Indeks 2 (.spesial)</li>
        <li>Item Indeks 3</li>
        <li>Item Indeks 4 (last)</li>
    </ul>

    <div style="margin-top: 15px;">
        <button id="btnFirst">Pilih :first</button>
        <button id="btnLast">Pilih :last</button>
        <button id="btnEq">Pilih eq(3)</button>
        <button id="btnFilter">Filter (.spesial)</button>
    </div>

    <script>
        $(document).ready(function() {
            function reset() { $('#daftarItem li').removeClass('highlight'); }
            $('#btnFirst').click(function() { reset(); $('#daftarItem li').first().addClass('highlight'); });
            $('#btnLast').click(function() { reset(); $('#daftarItem li').last().addClass('highlight'); });
            $('#btnEq').click(function() { reset(); $('#daftarItem li').eq(3).addClass('highlight'); });
            $('#btnFilter').click(function() { reset(); $('#daftarItem li').filter('.spesial').addClass('highlight'); });
        });
    </script>
</body>
</html>