Jquery/Gridster button affecting all items not single ones

I'm using the Gridster framework to create a dashboard and each of the dashboard items has a 'delete' and 'pin' button. However the issue I have is that when I click the 'pin' button (which locks a panel in place) it affects all the panels universally and not the individual one. The delete button works fine though and deletes the single panel. I can't add individual ID's or classes because the panels need to be generic. Why would the pin button not work in this instance?

Pin (which locks all panels into place but is only meant to lock the single panel in question):

$(document).on("click", ".gridster .pin-button", function () {

    var pin = $(".gridster ul").gridster().data('gridster');
    if (pin.drag_api.disabled) {
        pin.enable($(this).parent());
    } else {
        pin.disable($(this).parent());
    }
});

Delete button (which deletes the panel in question correctly):

$(document).on("click", ".gridster .delete-button", function () {

    var gridster = $(".gridster ul").gridster().data('gridster');
    gridster.remove_widget($(this).parent());

});

Example panel:

<div class="gridster row">
    <ul>
        <li class="gs_w" data-row="1" data-col="1" data-sizex="4" data-sizey="3">
            <button class="pin-button"><img src="pin.png"></button>
            <button class="delete-button"><img src="Close.png"></button>
            ... panel content ...
        </li>
    </ul>
</div>  

So according to https://github.com/dustmoo/gridster.js all I had to do was assign a static class to my main Gridster ie:

<script type="text/javascript">
    var gridster;

    $(function () {
        gridster = $(".gridster ul").gridster({
            widget_base_dimensions: [100, 100],
            widget_margins: [5, 5],
            helper: 'clone',
            static_class: 'card_static',
            draggable: {
                items: ".gs_w:not(.card_static)"
            },
            resize: {
                enabled: true
            }
        }).data('gridster');
        });
</script>

And then change my Pin JS to:

$(document).on("click", ".gridster .pin_button", function () {

if ($(this).parent().hasClass("card_static")) {

$(this).parent().removeClass("card_static")

} else{
$(this).parent().addClass("card_static")
}

});