How to get the index of the button clicked?

Question

I’m using a loop to generate elements dynamically:

for(var i =0; i< arrSequencia.length;i++ ){
strInterface += "<tr class='formulario'>"+
    "<td class='col-md-1'>"+
        "   <input type=\"button\" class=\"btn btn-danger btn-info-bloco sembloco\" value=\"Botao "+arrSequencia[i]+"\"/>"+
        "</td>"+

    "</tr>";
}

Can I capture the index of the clicked button ? For example:

Problem:

If I click the second button, I return the index: 1

    var acaoBotao = function() {
        //PEGAR O INDEX
    };

    function adicionaOuRemove() {
        var botoes = document.getElementsByClassName("btn-info-bloco");
        for(var i=0;i<botoes.length;i++){
            botoes[i].addEventListener('click', acaoBotao, false);
        }
    }

Example:

var arrSequencia = [1,2,3,4,5];
var strInterface ="";

$(document).ready(function(){menuQuestoes = $("#table");

for(var i =0; i< arrSequencia.length;i++ ){
    strInterface += "<tr class='formulario'>"+
                "<td class='col-md-1'>"+
                "   <input type=\"button\" class=\"btn btn-danger btn-info-bloco sembloco\" value=\"Botao "+arrSequencia[i]+"\"/>"+
                "</td>"+

                "</tr>";
}
        menuQuestoes.find("#tbody-content").append(strInterface);

                            
});

var acaoBotao = function() {
    
alert("//PEGAR O INDEX");
};

function adicionaOuRemove() {
    var botoes = document.getElementsByClassName("btn-info-bloco");
    for(var i=0;i<botoes.length;i++){
        botoes[i].addEventListener('click', acaoBotao, false);
    }
}
adicionaOuRemove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<table id="table" class="table table-bordered">
    <tbody id="tbody-content"></tbody>
</table>

In the jsFiddle

Answer 1

jQuery

$('.btn').on('click', function(){
   alert(($this).val());
});

Use the this for this. In the click function you have to put the selector as the button class, since there will be several. In your case there are several classes the button, but I put the .btn.

JS

var acaoBotao = function() {
    alert(this.value);
};

Answer 2

As each button is in a row distinct from your table, you can "simulate" its index by adding an attribute to your button when you create it, and then retrieve this index using the function .data() jQuery. Example:

for(var i =0; i< arrSequencia.length;i++ ){
strInterface += "<tr class='formulario'>"+
    "<td class='col-md-1'>"+
        "   <input type=\"button\" class=\"btn btn-danger btn-info-bloco sembloco\" value=\"Botao "+arrSequencia[i]+"\" data-index=\" + i +\"/>"+
        "</td>"+

    "</tr>";
}

var acaoBotao = function(el) {
    return $(el.srcElement).data('index');
};

Example in FIDDLE

Answer 3

Since you already have a loop to create the buttons you can use that and insert the index in a field data-index. Then the code would be like this:

for(var i =0; i< arrSequencia.length;i++ ){
    strInterface += "<tr class='formulario'>"+
                "<td class='col-md-1'>"+
                "   <input type=\"button\" data-index=\"" + i + "\" class=\"btn btn-danger btn-info-bloco sembloco\" value=\"Botao "+arrSequencia[i]+"\"/>"+
                "</td>"+

                "</tr>";
}

and then within your function acaoBotao can do:

 var index = this.dataset.index;

Another alternative is to do this when you join the event observers. In that case you could do so:

var acaoBotao = function (index) {
    return function(){
     // usar o index   
    }
};

function adicionaOuRemove() {
    var botoes = document.getElementsByClassName("btn-info-bloco");
    for (var i = 0; i < botoes.length; i++) {
        botoes[i].addEventListener('click', acaoBotao(i), false);
    }
}