仅执行一次-AJAX

Question

This AJAX only execute only one time and If you are clicked once, AJAX does not work for other "Details" buttons. What is the reason of this?

Buttons:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td><a id="detay-menu-toggle-right" data-paketno="3512" href="#">Details</a></td>
<td><a id="detay-menu-toggle-right" data-paketno="3841" href="#">Details</a></td> 

Javascript:

$(document).ready(function(){
    $("#detay-menu-toggle-right").click(function(){
        $("#detay-wrapper-right").toggleClass("active");
        var paketnosu = $(this).data("paketno");
        var dataString = 'paketDetayi='+paketnosu;
        $.ajax({
            data: dataString,
            url: 'test3.php',
            type: 'POST',
            success: function (data) {
                $("#detay-sidebar-wrapper-right").html(data);
            },
            error:
                function() {
                    alert('Not OKay');
                }
        });
    });
});

Answer 1

Use class instead of an ID, there can only be only one element with a particular ID on a page and jQuery will only act on the first one on the page it encounters.

$(document).ready(function(){
    $(".detay-menu-toggle-right").click(function(){
        $("#detay-wrapper-right").toggleClass("active");
        var paketnosu = $(this).data("paketno");
        var dataString = 'paketDetayi='+paketnosu;
        $.ajax({
            data: dataString,
            url: 'test3.php',
            type: 'POST',
            success: function (data) {
                $("#detay-sidebar-wrapper-right").html(data);
            },
            error:
                function() {
                    alert('Not OKay');
                }
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td><a class="detay-menu-toggle-right" data-paketno="3512" href="#">Details</a></td>
<td><a class="detay-menu-toggle-right" data-paketno="3841" href="#">Details</a></td>

</div>