Duvida sobre como transicionar variaveis PHP > Javascript > JQuery > PHP e etc...

Esse a duvida engloba: JAVASCRIPT, PHP , JQUERY, HTML.

Eu dou suporte a um sistema feito nessas tecnologias, e apareceu um problema recente, um usuário digitou um texto enorme e o campo atual não foi suficiente para leitura e causou problemas de legibilidade.

Então me pediram para criar um botão que abrisse um MODAL com o texto do usuário nele para melhor legibilidade antes da aprovação.

Estou há algum tempo tentando fazê-lo e não consegui, já fiz até uma solução alternativa com barra de rolagem para caso meu tempo estoure.

O Modal está criado, mas não consigo de jeito nenhum printar nada nele com javascript, e nem consigo puxar a variavel para php, pois o javascript não está puro, está envolvido com Jquery, estou bem perdido, como faço para printar a variavel descrição no devido local?

Segue código:


<style type="text/css">
#tblParaAprovar tbody td{
padding: 4px;
vertical-align:middle;
}
#tblParaAprovar{
margin-bottom: 5px;
}

#tblPedidosAprovados tbody td{
padding: 4px;
vertical-align:middle;
}
#tblPedidosAprovados{
margin-bottom: 5px;
}
.table-striped>tbody>tr:nth-of-type(odd) {
background-color: #ffe6e6;
}
button.btn_aprovacao{
margin: 0px;
font-weight: bold;
}
#legendasDiv{
margin-top: 0px;
margin-bottom:8px;
padding-left:5px;
background-color: #ddd;
font-weight: bold;
height: 31px;
}
.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
.tooltip-inner {
max-width: 350px;
/* If max-width does not work, try using width instead */
width: 350px;
text-align:left;
}
</style>

<div class="col-sm-12 panelPadraoDefault" style="margin-top:5px;">

<div class="panel panel-default" style="margin-bottom:40px;">
<div class="panel-heading">
<h3 class="panel-title text-center" style="font-size:18px;">Pedidos para Aprovação</h3>
</div>
<div class="panel-body" style="padding:8px;">

<div id="legendasDiv">
<div style="padding-top:3px;">
<span>Legenda:</span>
<button class="btn_aprovacao btn-success" disabled="disabled" style="margin-right:5px;">A</button>
<span> = Aprovar Pedido</span>
<button class="btn_aprovacao btn-warning" disabled="disabled" style="margin-right:5px;margin-left:15px;">S</button>
<span> = Sem Abono</span>
<button class="btn_aprovacao btn-danger" disabled="disabled" style="margin-right:5px;margin-left:15px;">C</button>
<span> = Cancelar Pedido</span>
</div>
</div>
<div id="divTabelaParaAprovacao">
<table class="table table-bordered table-striped table-hover" id="tblParaAprovar" style="font-size:11px;">
<thead style="color:white;background-color:#964A4A;">
<tr>
<th class="text-center" style="width:5%;">Num Req</th>
<th class="text-center" style="width:14%;vertical-align:middle;">Nome</th>
<th class="text-center" style="width:14%;vertical-align:middle;">Tipo</th>
<th class="text-center" style="width:5%;vertical-align:middle;">Data</th>
<th class="text-center" style="width:8%;vertical-align:middle;">Hr Inicial</th>
<th class="text-center" style="width:8%;vertical-align:middle;">Hr Final</th>
<th class="text-center" style="width:36%;vertical-align:middle;">Descrição</th>
<th class="text-center" style="width:10%;vertical-align:middle;">Aprovar?</th>
</tr>
</thead>
<tbody>

</tbody>
</table>
</div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title text-center" style="font-size:18px;">Pedidos já Aprovados</h3>
</div>
<div class="panel-body" style="padding:8px;">
<div id="divTablePedidosAprovados">
<!-- <table class="table table-bordered table-striped table-hover" id="tblPedidosAprovados" style="font-size:11px;">
<thead style="color:white;background-color:#964A4A;">
<tr>
<th class="text-center" style="width:5%;">Num Req</th>
<th class="text-center" style="width:14%;vertical-align:middle;">Nome</th>
<th class="text-center" style="width:14%;vertical-align:middle;">Tipo</th>
<th class="text-center" style="width:5%;vertical-align:middle;">Data</th>
<th class="text-center" style="width:8%;vertical-align:middle;">Hr Inicial</th>
<th class="text-center" style="width:8%;vertical-align:middle;">Hr Final</th>
<th class="text-center" style="width:36%;vertical-align:middle;">Descrição</th>
<th class="text-center" style="width:10%;vertical-align:middle;">Status</th>
</tr>
</thead>
<tbody>

</tbody>
</table> -->
</div>
</div>
</div>

</div>


<script type="text/javascript">

$.ajax({
url: 'perfis/_aprovador/code/pedidosPendentesAprovacao.php',
type: 'POST',
data: '',
dataType:'json',
success: function(data) {

if(0 === data.length){
$('#divTabelaParaAprovacao').html('<div class="alert alert-danger" style="margin-bottom: 0px;">'+
'Você não possui pedidos para aprovar.'+
'</div>');
throw new Error("Não possui pedidos em aberto.");
}

$('#tblParaAprovar tbody').html('');

for(var i = 0; i< data.length; i++){

var numReq = data[i].idjustificativa;
var numMatricula = data[i].num_matricula;
var nomeusuario = toTitleCase(data[i].nomeusuario);
var departamento = data[i].departamento;
var unidade = data[i].unidade;
var tipo = toTitleCase(data[i].nome_formulario);
var dataJustificativa = data[i].data_inicial_justificativa;
var hrInicial = data[i].hr_inicio_justificativa;
var hrFinal = data[i].hr_fim_justificativa;
var descricao = data[i].descricao; //A VARIAVEL QUE PRECISA SER EXIBIDA
var nomeStatus = data[i].nomestatus;


if('Falta' === tipo){
hrInicial = '-';
hrFinal = '-';
}

var tooltipNome = 'Nome: ' + toTitleCase(nomeusuario) + '<br>' + 'Matrícula: ' + numMatricula + '<br>' + 'Departamento: ' + departamento + '<br>' + 'Unidade: ' + toTitleCase(unidade);

var dataFormatada = moment(dataJustificativa).format("DD/MM/YYYY");

var btnAprovar = '<button onclick="classificarPedido(2,'+numReq+','+numMatricula+');" class="btn_aprovacao btn-success" style="margin-right:5px;"title="Aprovar Pedido">A</button>';
var btnAprovarSemAbono = '<button onclick="classificarPedido(4,'+numReq+','+numMatricula+');" class="btn_aprovacao btn-warning" style="margin-right:5px;" title="Sem Abono">S</button>';
var btnCancel = '<button onclick="classificarPedido(3,'+numReq+','+numMatricula+');" class="btn_aprovacao btn-danger" title="Cancelar Pedido">C</button>';

var btnGeral = btnAprovar + btnAprovarSemAbono + btnCancel;

var newLine = '<tr>'+
'<td class="text-center">'+numReq+'</td>'+
'<td class="text-left" data-html="true" data-container="body" data-toggle="tooltip" data-placement="bottom" title="'+ tooltipNome +'">'+nomeusuario+'</td>'+
'<td class="text-left">'+tipo+'</td>'+
'<td class="text-center">'+dataFormatada+'</td>'+
'<td class="text-center">'+hrInicial+'</td>'+
'<td class="text-center">'+hrFinal+'</td>'+
'<td clas