I'm trying to update the class of the object in the DOM that was clicked using data passed back from my api. User clicks a link in a bootstrap dropdown which passes some data to an api, and is returned the updated status which I want to use to update the css (and eventually the text) in the button. I can manipulate the DOM just after the click, but inside the done function, nothing happens. I know in other cases I've passed data with 'use', but I can't seem to do that in this case.
$(".status-item").click(function(){
$.post( "/api/orderstatus/{{$order->id}}", { status_id: 1 })
.done(function( data ) {
$(this).parent().parent().addClass('noticeme');
});
});
<div class="btn-group float-end">
<button type="button" class="btn btn-primary">Picked-up</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><i class="mdi mdi-chevron-down"></i></button>
<div class="dropdown-menu" style="">
<a class="dropdown-item status-item text-primary" href="#" data-id="1">Picked-up</a>
<a class="dropdown-item status-item text-info" href="#" data-id="2">Laundered</a>
</div>
</div>