Edit fields individually in modal window

Question

I have a list of customers that is displayed using a foreach, where it is possible to open a modal window individually. However, when editing a given field for such a client, this information is repeated for all others. I would like to know how to insert specific information for each client in their respective modal [using jQuery/Javascript].

<script type="text/javascript">
$(document).on("click", ".modalEditar", function () {
     var myBookId = $(this).data('id');
     $(".modal-body #idCli").val( myBookId );
});
</script>

<?php foreach($resultado as $cli){
    $id     = $cli['id'];
    $nome       = $cli['nome'];
    ?>
    <td><?php echo $id; ?></td>
    <td><?php echo $nome; ?></td>
    <td><a class="modalEditar" data-id="<?php echo $id ;?>" data-toggle="modal" 
data-target="#editar">Editar</a>
    </td>
    <?php } ?>

<!-- Modal -->
<div id="editar" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal</h4>
            </div>
            <div class="modal-body">
                <div class="bx-modal">
                    <h4>Corpo
                </div>
                <input type="text" name="idCli" id="idCli" hidden value="" />
                <div class="spanN" style="margin-top:10px;">
                    <label>Texto de Correção:</label>
                </div>
                <textarea id="texto-correcao" name="texto-correcao"></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" style="float:left;" class="btn btn-default 
fecharModal" data-dismiss="modal">Fechar</button>
                <button type="button" id="enviarCartaCorrecao" style="float:right;" 
class="btn btn-primary">Enviar</button>
            </div>
        </div>
    </div>
</div>