So far I could combine your two codes (from here and for the long text fields), adding two modals.
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
// Identify the questions
var qArrayID = {QID};
var qArray = $('#question'+qArrayID);
var arrayLength = $('tr.answers-list', qArray).length;
var qUploads = qArray.nextAll('.upload-files:lt('+arrayLength+')');
var qComments = qArray.nextAll('.text-long:lt('+arrayLength+')');
// Add some classes COMMENTS
qArray.addClass('array-with-comments-question');
$(qComments).each(function(i) {
$(this).addClass('comments-question index-'+i).css({
'position': 'absolute',
'left': '-9999em'
});
});
// Add some classes UPLOADS
qArray.addClass('array-with-uploads-question');
$(qUploads).each(function(i) {
$(this).addClass('uploads-question index-'+i).css({
'position': 'absolute',
'left': '-9999em'
});
});
// Insert the comments buttons
$('table.questions-list colgroup', qArray).append('<col />');
var tableWidth = $('table.questions-list:eq(0)', qArray).width();
var answerWidth = $('col.ls-col-odd:eq(0)', qArray).width();
var answerWidthPercent = (answerWidth/tableWidth)*100;
var answersLength = $('col.ls-col-odd, col.ls-col-even', qArray).length;
var answerWidthPercent2 = (answerWidthPercent*answersLength)/(answersLength+1)
$('table.questions-list col', qArray).removeAttr('width');
$('table.questions-list col:not(.col-answers)', qArray).css('width', answerWidthPercent2+'%');
$('table.questions-list col:not(.col-answers)', qArray).css('width', 'auto');
$('table.questions-list thead tr', qArray).append('<td />');
$('tr.answers-list', qArray).each(function(i) {
$(this).append('<td class="answer-item">\
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#comments-'+qArrayID+'-'+(i+1)+'" data-backdrop="static" data-keyboard="false">WebLink</button>\
</td>');
});
// Insert the "Upload" buttons
$('table.questions-list colgroup', qArray).append('<col />');
var tableWidth = $('table.questions-list:eq(0)', qArray).width();
var answerWidth = $('col.ls-col-odd:eq(0)', qArray).width();
var answerWidthPercent = (answerWidth/tableWidth)*100;
var answersLength = $('col.ls-col-odd, col.ls-col-even', qArray).length;
var answerWidthPercent2 = (answerWidthPercent*answersLength)/(answersLength+1)
$('table.questions-list col', qArray).removeAttr('width');
$('table.questions-list col:not(.col-answers)', qArray).css('width', answerWidthPercent2+'%');
$('table.questions-list col:not(.col-answers)', qArray).css('width', 'auto');
$('table.questions-list thead tr', qArray).append('<td />');
$('tr.answers-list', qArray).each(function(i) {
$(this).append('<td class="answer-item">\
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#upload-'+qArrayID+'-'+(i+1)+'" data-backdrop="static" data-keyboard="false">Upload</button>\
</td>');
});
// Loop through the upload questions
$(qUploads).each(function(i) {
// Create a modal
$('body').append('<div class="modal upload-modal" id="upload-'+qArrayID+'-'+(i+1)+'" tabindex="-1" role="dialog">\
<div class="modal-dialog" role="document">\
<div class="modal-content">\
<div class="modal-header">\
<h5 class="modal-title">'+$('.ls-label-question', this).html()+'</h5>\
</div>\
<div class="modal-body">\
</div>\
<div class="modal-footer">\
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Okay</button>\
</div>\
</div>\
</div>\
</div>');
// Move this question into the modal
$('#upload-'+qArrayID+'-'+(i+1)+' .modal-body').append($(this));
$(this).css({
'position': 'relative',
'left': 'auto'
});
});
// Handle comments
$(qComments).each(function(i) {
// Create modals
$('body').append('<div class="modal comments-modal" id="comments-'+qArrayID+'-'+(i+1)+'" tabindex="-1" role="dialog">\
<div class="modal-dialog" role="document">\
<div class="modal-content">\
<div class="modal-header">\
<h5 class="modal-title">'+$('.ls-label-question', this).html()+'</h5>\
</div>\
<div class="modal-body">\
</div>\
<div class="modal-footer">\
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Okay</button>\
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Clear</button>\
</div>\
</div>\
</div>\
</div>');
// Move textareas into modals
$('#comments-'+qArrayID+'-'+(i+1)+' .modal-body').append($('textarea', this));
// Modal button events
$('#comments-'+qArrayID+'-'+(i+1)+' .modal-footer .btn-secondary').on('click', function(e) {
$('#comments-'+qArrayID+'-'+(i+1)+' textarea').val('');
});
});
// Interrupt the Next/Submit function (to put upload questions back in the form)
$('#ls-button-submit').on('click', function(e) {
$('.upload-modal').each(function(i) {
$('.upload-files', this).css({
'position': 'absolute',
'left': '-9999em'
});
$('.group-container').append($('.upload-files', this));
});
});
// Interrupt the Next/Submit function (to put comments back in the form)
$('#ls-button-submit').on('click', function(e) {
$('.comments-modal').each(function(i) {
var qID = $('textarea:eq(0)', this).attr('id').split('X')[2];
$('#question'+qID+' .answer-item:eq(0)').append($('textarea:eq(0)', this));
});
});
});
</script>
