retrieve attribute value data-id from html button and bootstrap [duplicated]

I do not think the problem is there, apparently you are using the id in the buttons.

You are using the selector # or selector for id : $('#btnCancelarFactura') , but this selector returns 0 or 1 elements, not multiles. It means that only the first element found with id="btnCancelarFactura" installs the driver and the rest do not install it; is done so, it is assumed that the ids are unique.

There are two options, a selector by multiple for the attriute id : notese [id=btnCancelarFactura]

$('button[id=btnCancelarFactura]').on('click',function () {
  alert($(this).data("id"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnCancelarFactura" class="btn btn-warning" data-id=".234">1...</button>
<button id="btnCancelarFactura" class="btn btn-warning" data-id=".678">5...</button>
<button id="btnCancelarFactura" class="btn btn-warning" data-id=".012">9...</button>

or use a class, exclusive to these "cancel" buttons and select the elements, here the id does not need it.

<button class="btn btn-warning mibtn-cancelar" ... >
<button class="btn btn-warning mibtn-cancelar" ... >

Then you use the class selector and you take all the buttons.

$('.mibtn-cancelar').on('click',function () {
    alert($(this).data("id"));
});

You were short, I recommend you always make sure via debugger that the selector is taking all the elements that you are expected to select.

You are defining the eventHandler to a single item btnCancelarFactura , what you should do is change it by a clase instead of a id (HTML)

Check the following code to get the idea:

 $('.btn').on('click',function () {
        alert($(this).data("id"));
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnCancelarA" class="btn btn-warning" data-id="A">Ok</button>
<button id="btnCancelarB" class="btn btn-warning" data-id="B">Ok</button>
<button id="btnCancelarC" class="btn btn-warning" data-id="C">Ok</button>

  

I have a button in each row of a table with the data-id attribute which is different from the other rows

Well, then forget about using ID. Use classes.

<button class="btnCancelarFactura btn btn-warning" data-id="@item.facturaCancelacion">Ok</button>

And in JS:

$('.btnCancelarFactura').on('click',function () {
    var dataId = $(this).attr("data-id");
    alert($(this).attr("data-id"));
});

I leave the example working: link

Greetings

Edit: I've extended the example to several buttons.