Can I set a data attribute on bootstrap 5 modal button in modal footer? Below is my attempt and it's failing

Question

I'm trying to set a data attribute on a button in a BS5 modal footer so I can pass that information to an AJAX function. I can set the value of the button, but cannot get the data attribute to update.

JavaScript code:

$('.soldVehicle').on('click', function() {
    var thisID = $(this).data('id');
    var thisName = $(this).data('name');
    $('#soldModal #vDetails').html(thisName);
    soldModal.show();
});
$('#soldModal').on('shown.bs.modal', function(event) {
    var btn = $('.soldVehicle');
    var vID = btn.data('id');
    var modal = $(this);
    modal.find('#soldVehicle').data('id', vID);
});

Modal Code:

<div class="modal fade" id="soldModal" tabindex="-1" aria-labelledby="soldModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="soldModalLabel">MARK VEHICLE AS SOLD</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="CANCEL"></button>
      </div>
      <div class="modal-body">
        <p>Do you want to mark the following vehicle as sold?</p>
        <div id="vDetails"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">CANCEL</button>
        <button id="soldVehicle" type="button" class="btn btn-agency" data-id="">SOLD IT!</button>
      </div>
    </div>
  </div>
</div>

Is this possible or do I need to settle for setting the value attribute?

Answer 1

In playing around with different methods to set the data-id attribute, it appears that you have to use .attr method to set it. The .data method doesn't work and the .prop method doesn't work.

I guess I have some learning to do about the intricacies of those JQuery methods as they relate to Bootstrap Modals and how they are represented in the DOM.

Hopefully, this can help someone else.