从不同的php变量设置模态div上的文本

Question

I'm trying to set different texts on div fields in a modal, i'm using the Bootstrap modal and setting 1 field with the next Javascript function, what i actually need to do is send several data texts to that modal. The data that I'm sending is the value tag from different inputs hidden in a form, and there is too my <a></a> tag which open my modal.

My current code looks like this, and it shows it from a php function, i'm sending their values with a data attribute to my JS:

         echo '<form name="data-form">
              <input type="hidden" name="value" value="'.$qb["value"].'">
              <input type="hidden" name="idBol" value="'.$dat["id"].'">
              <input type="hidden" name="numBol" value="'.$n.'">
              <input type="hidden" name="idEvent" value="'.$qb["eventId"].'">
              <input type="hidden" name="nameEvent" value="'.$nameEve.'">
              <button type="button" href="#detallesModal" role="button" data-toggle="modal" data-nomb="'.$nomEve.'" data-precio="'.$valor.'" data-ciudad="'.$nomCiu.'" data-fecha="'.$fechaEvento.'" data-hora="'.$horaEvento.'" class="botonbol botonesbol btn-block ubicacionBoton open-detallesModal">
            Details
          </button>
            </form>
          </div>'; 
    }       
    echo '</div>      
        </div>';

Here's my Javascript which sets a field with the value of my button, but i need to use all the values from those inputs and send'em to my modal, plus it. there's a foreach function, so that form change its values for each response from my database

$(document).on("click", ".open-AddBookDialog", function () {
     var myBookId = $(this).data('id');
     $(".modal-body #bookId").val(myBookId);

     document.getElementById("content").innerHTML = $(this).name('valor');
     document.getElementById("title-content").innerHTML = $(this).name('nombreEvento');
     // As pointed out in comments, 
     // it is superfluous to have to manually call the modal.
     // $('#addBookDialog').modal('show');
});

EDIT: Now i set my modal in my view, and the form is in a controller, they conect eachother with the javascript code, no it sends data correctly, but only in the input fields, i need to set'em just in my <td> tags. Here's my current modal table

<table class="table table-striped"> 
                            <tr>
                              <th style="text-align: right!important;">
                                Nombre del Evento:
                              </th>
                              <td>
                                <input readonly class="form-control"  name="nomb" value="" id="nomb" type="text">
                              </td>
                            </tr>
                            <tr>
                              <th style="text-align: right!important;">
                                Precio de entrada:
                              </th>
                              <td>
                                <input readonly class="form-control" name="precio" id="precio" onkeydown="alpha(this)" onkeyup="alpha(this)" onblur="alpha(this)" onclick="alpha(this)" value="" type="text">
                              </td>
                            </tr>
                            <tr>
                              <th style="text-align: right!important;">
                                Ciudad:
                              </th>
                              <td>
                                <input readonly class="form-control" onkeydown="ime(this)" onkeyup="ime(this)" onblur="ime(this)" onclick="ime(this)"  name="ciudad" id="ciudad" value=""  type="text">
                              </td>
                            </tr>
                            <tr>
                              <th style="text-align: right!important;">
                                Fecha:
                              </th>
                              <td>
                                <input readonly class="form-control" onkeydown="ime(this)" onkeyup="ime(this)" onblur="ime(this)" onclick="ime(this)" name="fecha" id="fecha" value="" type="date">
                              </td>
                            </tr>
                            <tr>
                              <th style="text-align: right!important;">
                                Hora:
                              </th>
                              <td>
                                <input readonly class="form-control" name="hora" id="hora" onkeydown="emailk(this)" onkeyup="emailk(this)" onblur="emailk(this)" onclick="emailk(this)" value="" type="time">
                              </td>
                            </tr>
                        </table>
                        <div>
                          <h4>Condiciones del Evento: </h4>
                          <p>aquí las condiciones del evento</p>
                        </div>

Answer 1

Just added a JS file which catch the data of a button:

<button type="button" href="#Modal" role="button" data-toggle="modal" data-nomb="'.$nomEve.'" data-precio="'.$valor.'" data-ciudad="'.$nomCiu.'" data-fecha="'.$fechaEvento.'" data-hora="'.$horaEvento.'" class="btnbol btn-block ubiBtn open-detModal">
   Details
</button>

then de JS file catch the data values and send them to the modal divs:

$(document).on("click", ".open-detallesModal", function () 
{
  var nomb = $(this).data('nomb');
  var precio = $(this).data('precio');
  var ciudad = $(this).data('ciudad');
  var fecha = $(this).data('fecha');
  var hora = $(this).data('hora');
  // $(".modal-body #nomb").val( nomb );
  $(".modal-body #nomb").html(nomb);
  $(".modal-body #precio").html( precio );
  $(".modal-body #ciudad").html( ciudad );
  $(".modal-body #fecha").html( fecha );
  $(".modal-body #hora").html( hora );
});