Please help us help you and fill where relevant:
Your LimeSurvey version: LimeSurvey Community Edition   Version 6.0.1+230411 
Own server or LimeSurvey hosting: by an organization 
Survey theme/template: fruity - extended  
==================
Hello  everyone,  

I'm wondering how can I make the pop-up comment  works on the latest LimeSurvey version. LS Community Edition just updated to Version 6,  but now the pop-up comment box that used to work on version 5.6  isn't working well anymore. I used to have  Version 5.6.3+230130 in February, but now it's Version 6.0.1+230411.
Any suggesitons? 


I'm attaching of the sample survey.  Here's the code I used: 
<script charset="utf-8" type="text/javascript">
    
    $(document).on('ready pjax:scriptcomplete',function(){
 
        // Identify the questions
        var qArrayID = {QID};
        var qArray = $('#question'+qArrayID);
        var arrayLength = $('tr.answers-list', qArray).length;
        var qComments = qArray.nextAll('.text-long:lt('+arrayLength+')');
        
        // Add some classes
        qArray.addClass('array-with-comments-question');
        $(qComments).each(function(i) {
            $(this).addClass('comments-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">Comments</button>\
                            </td>');
        });
        
        // 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 comments back in the form)
        $('#limesurvey').submit(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>
 

LimeSurvey 6 is using Bootstrap 5. There are a lot of changes. You can find a list here:
getbootstrap.com/docs/5.0/migration/

Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use

Code:

data-bs-toggle

instead of

Code:

data-toggle

.

If you change data-  to data-bs in the question javascriptcode the comment boxes will reappear.
See the attached file. Perhaps there are more issues. Please check again.





 

Thank you, Jelo!
I modified the code just like what you recommended and it worked! You're awesome!

Another error that I noticed is the Enable token-based response persistence. I'm using token and participants are non-anonymous. That feature worked fine in the previous lime version, but for some reason this version 6 does NOT save likert-scale responses but can save comments. Previous responses disappear  whenever I navigate or click back to previous questions, but  lime keeps any text input in the comment box. I'll post another querry later to detail what's going on.

I'm also reading your post on this link , but not sure if applicable to LS v.6.


Many thanks again!

Remove all JavaScript and retest.