Eu tenho uma tabela Dinâmica, uso o TWIG para preencher os dados automaticamente, nessa tabela eu tenho em cada Linha 2 botões, um de Editar, e o Outro de excluir, quando eu clico no botão Editar Abro Um modal, eu gostaria de saber como eu faço para que os dados daquela linha especifica que foi clicado no botão de editar serem pre carregados nos inputs do modal, eu consigo preencher os dados usando JQuery, mas o problema é que só funciona pra Primeira Linha.
<!-- MODAL EDIT UNIDADE -->
<div class="modal fade" tabindex="-1" role="dialog" id="edita_unidade">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h5 class="modal-title">Editar Unidade</h5>
</div>
<div class="modal-body">
<form>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label>CNPJ:</label>
<input class="form-control" type="text" name="cnpj_" id="cnpj_">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label>Nome Unidade:</label>
<input class="form-control" type="text" name="unidade_" id="unidade_">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button id="left_modal" type="button" class="btn btn-info pull-left" data-dismiss="modal"><i class="fa fa-close"></i> Fechar</button>
<button id="edit_unidade_modal" type="button" class="btn btn-success pull-right"><i class="fa fa-edit"></i> Atualizar</button>
</div>
</div>
</div>
</div>
<table width="100%" class="table table-hover" id="unidades-grupo" referral="0" style="border-top: 0;">
<thead>
<tr>
<th>ID Unidade</th>
<th>Nome</th>
<th>CPF/CNPJ</th>
<th>Data Cadastro</th>
<th>ID Grupo</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<input type="hidden" id="id_unidade_dell" value="9">
<tr>
<td onclick="redirectUnidade('9')">9</td>
<td onclick="redirectUnidade('9')">Filial Redenção - 002</td>
<td onclick="redirectUnidade('9')">102938475657482</td>
<td onclick="redirectUnidade('9')">2019-01-17T19:03:11.000Z</td>
<td onclick="redirectUnidade('9')">1</td>
<td style="text-align: center;"><i data-toggle="modal" data-target="#edita_unidade" cnpjUnidade="102938475657482" nomeUnidade="Filial Redenção - 002" id="icon_edit_uni" onclick="edit_unidade(9)" idUnidade='9' class="fa fa-edit editaGrupo"title="Editar Unidades"></i></td>
<td style="text-align: center;"><i id="delete_uni" onclick="del_unidade(9)" class="fa fa-trash grupo-del" title="Deletar Unidade"></i></td>
</tr>
<input type="hidden" id="id_unidade_dell" value="11">
<tr>
<td onclick="redirectUnidade('11')">11</td>
<td onclick="redirectUnidade('11')">Filial New York</td>
<td onclick="redirectUnidade('11')">66449484756</td>
<td onclick="redirectUnidade('11')">2019-01-19T22:12:20.000Z</td>
<td onclick="redirectUnidade('11')">1</td>
<td style="text-align: center;"><i data-toggle="modal" data-target="#edita_unidade" cnpjUnidade="66449484756" nomeUnidade="Filial New York" id="icon_edit_uni" onclick="edit_unidade(11)" idUnidade='11' class="fa fa-edit editaGrupo"title="Editar Unidades"></i></td>
<td style="text-align: center;"><i id="delete_uni" onclick="del_unidade(11)" class="fa fa-trash grupo-del" title="Deletar Unidade"></i></td>
</tr>
</tbody>
</table>
<script>
function edit_unidade(id){
$('#icon_edit_uni').on('click', function(){
var nome = $(this).attr('nomeUnidade');
// alert(nome);
var cnpj = $(this).attr('cnpjUnidade');
// alert(cnpj);
$('#cnpj_').attr('value', cnpj);
$('#unidade_').attr('value', nome);
$('#edit_unidade_modal').attr('value', id);
});
}
</script>
class
em vez deid
.