Repeat data from a row in the modal table

Question

I receive from the website contact form the data and list them on a system backend.

Currently all of them are displayed online (nome, assunto, e-mail, telefone, id , ação[excluir]), I would like it to appear only the email and name and the rest by clicking on the line or email it opens in a Bootstrap modal.

I was able to get him to show up for every line, only he only pulls the data from the first message from bd

Follows an excerpt from the code:

 <?php 
 $this->load->view('menu');
 ?>  
    <div class="container">
        <h1>Dúvidas? Sugestões? Alguem entrou em contato conosco!</h1>
            <table class="table">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>E-mail</th>
                  <th>NOME</th>
                  <th>ASSUNTO</th>
                  <th>MENSAGEM</th>
                  <th>TELEFONE</th>
                  <th>DATA</th>
                  <th>AÇÃO</th>
                </tr>
              </thead>
              <tbody>
                <?php if($usuarios){foreach ($usuarios as $usuario) { ?> 
                <tr>
                  <th scope="row"><?php echo $usuario["id"]; ?></th>
                  <th><a href="#myModal"  data-toggle="modal" data-target="#myModal"><?php echo $usuario["email"]; ?></a></th>
                       <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                        <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">&times;</span></button>
                              <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                            </div>
                            <div class="modal-body">
                                  <p> <?php echo $usuario["nome"]; ?></p>
                                <p><?php echo $usuario["assunto"]; ?></p>
                                <p><?php echo $usuario["mensagem"]; ?></p>
                                <p><?php echo $usuario["tel"]; ?></p>
                                <p><?php echo $usuario["data"]; ?></p>
                                <p><a class="btn btn-danger" href="<?php echo base_url('mensagem/deletar/'. $usuario["id"]); ?>" onclick="return confirm('Deseja deletar esta mensagem?');"> <i class="glyphicon glyphicon-trash"></i>
                                    </a></p>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                              <button type="button" class="btn btn-primary">Save changes</button>
                            </div>
                          </div>
                        </div>
                      </div>


                </tr>


                <?php  } // end foreach
                  } else {
                ?>

                <tr>
                  <td colspan="3" class="text-center">Não há mensagens pendentes.</td>
                </tr>


                 <?php
                  } // end if
                ?>

              </tbody>
            </table>

           <p>Estas mensagens são relacionadas ao formulário de <a href="http://www.softlove.com.br/index.php/formulario/contato"> contato </a> do site.</p>
    </div>



<?php 
$this->load->view('script');
?>

<script type="text/javascript">
  $('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})
</script>

Answer 1

Very simple: pass a unique ID to the data-target (or for the href) of modal:

data-target="#myModal<?=$usuario["id"];?>"

And each modal must have the same id:

id="myModal<?=$usuario["id"];?>"

You can also change the content of modal using JQuery (see here), but like your loop already returns the id of each item, it is more interesting to change it and adapt the data-target.

Answer 2

I got it this way using the Materialize css Framework

In case someone needs!!! :)

Follows the code:

                <?php foreach ($listagem as $list): ?>
            <!--Corpo da Tabela-->
            <tbody>
                <tr>
                    <td><?= $list['nome'] ?></td>
                    <td><?= $list['sobrenome'] ?></td>
                    <td><?= $list['sexo'] ?></td>
                    <td><?= $list['email'] ?></td>
                    <td><?= $list['fone'] ?></td>
                    <td><?= $list['msg'] ?></td>
                            <td>
                        <input type="hidden" value="<?= $list['id'] ?>">
                        <a href="#modal_edit?<?= $list['id'] ?>" class="btn waves-effect waves-light btn-medium blue modal-trigger" title="Editar">
                                                    <i class="material-icons large">edit</i></a>
                    </td>

                    <!--Modal_Edit-->
                    <div id="modal_edit?<?= $list['id'] ?>" class="modal">
                        <div class="modal-content">
                            <h4><strong>Editar</strong></h4>
                                                            <!--Form de Edição-->
                            <?php include ('form_edit.php'); ?> 
                        </div>
                        <div class="modal-footer">
                            <a class="btn btn-medium" href="">Fechar</a>
                            <a class="btn btn-medium" href="">Salvar</a>
                        </div>
                    </div>
                    <!-- Fim Modal Edit-->
                                       </tr>
            </tbody>
        <?php endforeach ?>
    </table>
</div>