Como hacer una lista donde se puedan agregar varios registros y guardar todos esas datos?

Hola estoy queriendo hacer un listado para agregar personal que participo en una capacitación y no se como podría hacer que cuando abra el modal y de en la opcion de agregar se vayan agregando a un listado y al haber agregado las personas que participaron a la capacitación pueda guardarlo y me muestre en la tabla de capacitaciones muestre solo el nombre de la capacitación y que al darle editar pueda ver toda esa información que guarde y pues saber como editarla también, no he podido encontrar como hacer eso, lo unico que he logrado hacer es hacer una tabla donde deberia de aparecer los datos que iria agregando y un modal donde mostraria todo el personal:

<!DOCTYPE html>     <?php          include "conexion/db.php";         $  sql = "SELECT a.Id_foto, a.Nombre_em, b.Id_cargo, b.Cargo                 FROM personal as a                 INNER JOIN cargo b on b.Id_cargo = a.Id_cargo";         $  resul = $  cone->query($  sql);     ?>     <html lang="en">       <head>           <meta charset="utf-8">         <meta http-equiv="X-UA-Compatible" content="IE=edge">         <meta name="viewport" content="width=device-width, initial-scale=1">         <title>Capacitaciones</title>        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">         <link rel="stylesheet" href="css/styl.css">         <link rel="stylesheet" href="css/custom.css">         <link rel=icon href='img/logo-icon.png' sizes="32x32" type="image/png">  </head>       <body>      <br>          <div class="container">         <div class="panel panel-info">             <div class="panel-heading">                 <h4><i class='glyphicon glyphicon-edit'></i> Listado de personal</h4>             </div>             <div class="panel-body">                     <div class="form-group row">                       <label for="capa" class="col-md-1 control-label">Capacitacion</label>                       <div class="col-md-3">                           <input type="text" class="form-control input-sm" id="capa" placeholder="Escriba la capacitacion" required>                        </div>                        </div>                 <!-- Modal -->                 <div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">                   <div class="modal-dialog modal-lg" 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">Buscar personal</h4><br>                       </div>                       <div class="modal-body">                           <div class="form-group">                             <div class="col-sm-6">                               <input type="text" class="form-control" id="buscar" placeholder="Buscar productos" onkeyup="load(1)">                             </div><br><br>                           </div>                            <table id="tabla" border="1" class='tabla_datos'>                         <thead>                             <tr id="titulo">                                 <th>Nº Foto</th>                                 <th>Nombre empleado</th>                                 <th>Cargo</th>                                 <th>Comando</th>                             </tr>                         </thead>                         <tbody>                             <?php while ($  row = $  resul->fetch_assoc())                               {?>                                 <tr>                                     <td><?php echo $  row['Id_foto']; ?></td>                                     <td><?php echo $  row['Nombre_em']; ?></td>                                     <td><?php echo $  row['Cargo']; ?></td>                                     <td><a href="#">Agregar</a></td>                                 </tr>                             <?php }?>                         </tbody>                     </table>                          <div id="loader" style="position: absolute; text-align: center; top: 55px;  width: 100%;display:none;"></div>                         <div class="outer_div" ></div>                       </div>                       <div class="modal-footer">                         <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>                        </div>                     </div>                   </div>                 </div>                  <!-- Modal -->                      <form class="form-horizontal" role="form" id="datos_factura">                     <div class="col-md-12">                         <div class="pull-right">                             <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">                              <span class="glyphicon glyphicon-plus"></span> Agregar personal                             </button>                             <button type="submit" class="btn btn-default">                               <span class="glyphicon glyphicon-save"></span> Guardar                             </button>                         </div>                       </div>                 </form>               <div id="resultados" class='col-md-12' style="margin-top:10px"></div>                 </div>          </div>               </div>         <hr>         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>         <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">         <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>        </body>     </html>     <script type="text/javascript" src="js/letras.js"></script>     <script type="text/javascript" src="js/buscar.js"></script> 

Espero me puedan ayudar