How can I get attributes from dynamically created buttons?

Question

So, I am building some sort of e-commerce website and I needed to import a bunch of products from a mysql database, using nodejs and ajax.

I've been able to get that so far, aswell as creating certain buttons below each product that will lead to a /product page where additional information will be displayed of that exact product.

Since those buttons were not dynamic, I had the need to add an attribute, which will contain the products ID, which I will then use to send a POST request to the server so I can get the information about that specific product.

And although I was able to add the attribute to the buttons themselves, I have no idea how to get their value.

This is how I added my attributes to the buttons.

$(function () {
        $.ajax({
            type: 'POST',
            url: '/getPacotes',
            success: function (data) {
                for (var i = 0; i < data.length; i++) {

                    var idPacote = data[i].idPacote;
                    var nomePacote = data[i].Nome_Pacote;
                    var precoPacote = data[i].Preco_Pacote;
                    var fornecedorPacote = data[i].Fornecedor_Pacote;
                    var foto = "https://webitcloud.net/PW/1617/RMR/Views/images/Pacotes/" + data[i].Foto;

                    var pacoteSet1 = "<div class='col-md-4 pacotes'>";
                    var pacoteSet2 = "<img src=" + foto + " alt='Mountain View' style='width:150px;height:150px;'><br><br><input id=btnPac" + i + "' type='button' name='comprar' value='Comprar Pacote'>";
                    var pacoteSet3 = "</div>";

                    $("#pacotes").append(pacoteSet1 + "<h1>" + nomePacote + "</h1>" + "<h2>" + fornecedorPacote + "</h2>" + "<h3>" + precoPacote + "euros/mes </h3>" + pacoteSet2 + pacoteSet3);
                    $(document).find("#btnPac" + i).attr({
                        "idPacote": idPacote
                    });
                }
            }
        });
    });

And this is how I was trying to get their attributes

$("button").each(function () {
        console.log(this.idPacote);
        $.post("http://localhost:3000/pacote?id=" + this.idPacote);
    });

But it doesn't seem to work idPacote returns undefined and I have no idea why, because I simply give the buttons an "id" and replace the idPacote with the "id" itself, it will return the buttons ID

Sorry if the question sounds dumb. I am not very experienced in these matters.

Answer 1

When you are using jQuery I would suggest you to use the HTML5 data attribute in order to set a specified attribute to a HTML element:

<button data-id="1"></button>

You can set and access it using jQuery:

$('button').data('id', value); //set data-id

$('button').data('id'); //Read data-id

---

Furthermore change

<input id=btnPac" + i + "' type='button' name='comprar' value='Comprar Pacote'>

to

<button name='comprar'>Comprar Pacote</button>

in order to get elements from $('button')