problema $.each y boton creado previamente

[PIRRUMAN]

Buenas Tardes,
quiero enlistar resultados y agregarles un boton pero dentro del $.each no lo agrega a todas las filas , solo lo coloca al final:

Código Javascript:

$(document).ready(function () {
        var btnCancel = $(
                '<button/>',
                {
                    id: 'btnC', text: 'Cancelar',
                    click: function () {
                        alert('hola');
                    }
                }
        );
        var vectorPersonas = ['Elena', 'Isabel', 'Ana'];
        var tb = $("#tb");
        $.each(vectorPersonas, function (ind, elem) {
            tb.append(
                    $("<tr>")
                    .append($("<td>").html(elem))
                    .append($("<td>").append(btnCancel))
                    )
        });
    });
 

mi tabla:
<table id="tb" border = 1></table>


el resultado:

Código HTML:

<table id="tb" border="1">
<tbody>
<tr>
<td>Elena</td><td></td></tr>
<tr><td>Isabel</td><td></td></tr>
<tr><td>Ana</td><td><button id="btnC">Cancelar</button></td></tr></tbody>
</table>
 

como podria hacer que se dibuje en cada linea el boton creado (sin crearlo dentro del $.each)?


Gracias de antemano

[tuadmin]

es que estas usando el MISMO BOTON, en javascript los elementos DOM son elementos unicos,

cada vez que haces esto

.append($("<td>").append(btnCancel))

.append($("<td>").append(btnCancel))

estas moviendo el mismo boton pero al ultimo elemento que hace Append

, tienes 2 soluciones o CLONAS el elemento "btnCancel" y le haces append o creas tu btnCancel dentro de tu bucle.