Help Finding Difference in two pieces of code designed to add and store comment boxes

Hello!

I am working with a Qualtrics survey and have created comment boxes using JavaScript for survey users to input additional data. We are capturing the data using embedded data fields and want to be able to use the data and analysis options in Qualtrics to view and export responses.

I have a question in a matrix table in the Likert type that is storing and saving comments properly. This question has comment boxes for each row of the matrix table, and has comments storing into embedded data fields named comments|QID|# where the # is the row in the matrix table.

For other questions, I have just one comment box below the question where comments should be stored as comments|QID# , but the comments aren’t storing properly. Can anyone help me figure out why one code is working and the other is not? Appreciate any help!!

Here is the Matrix table code: 

Qualtrics.SurveyEngine.addOnload(function() {
  var that = this;
  var table = this.getQuestionContainer().querySelector('table');
  var rows = table.getElementsByTagName('tr');

  function saveComments() {
    for (var i = 1; i < rows.length; i++) {
      var commentId = 'comment_' + that.questionId + '_' + (i - 1);
      var commentBox = document.getElementById(commentId);
      if (commentBox) {
        Qualtrics.SurveyEngine.setEmbeddedData('comments|' + that.questionId + '|' + (i - 1), commentBox.value);
     

      }
    }
  }

  for (var i = 1; i < rows.length; i++) {
    var commentId = 'comment_' + this.questionId + '_' + (i - 1);
    var commentValue = Qualtrics.SurveyEngine.getEmbeddedData('comments|' + this.questionId + '|' + (i - 1)) || "";
    var commentBox = document.createElement('textarea');
    commentBox.setAttribute('id', commentId);
    commentBox.setAttribute('rows', '2');
    commentBox.setAttribute('cols', '20');
    commentBox.setAttribute('placeholder', 'Enter your comments here');
    commentBox.value = commentValue;
    commentBox.addEventListener('input', function() {
      saveComments();
    });
    var commentBoxCell = rows[i].insertCell(-1);
    var commentBoxDiv = document.createElement('div');
    commentBoxDiv.appendChild(commentBox);
    commentBoxCell.appendChild(commentBoxDiv);
  }

  this.previousButton.onclick = function(event) {
    saveComments();
  }

  this.nextButton.onclick = function(event) {
    saveComments();
  }
});

Qualtrics.SurveyEngine.addOnPageSubmit(function(type) {
  if (type === 'next' || type === 'previous') {
    var table = this.getQuestionContainer().querySelector('table');
    var rows = table.getElementsByTagName('tr');

    for (var i = 1; i < rows.length; i++) {
      var commentId = 'comment|' + this.questionId + '|' + (i - 1);
      var commentBox = document.getElementById(commentId);
      if (commentBox) {
        Qualtrics.SurveyEngine.setEmbeddedData('comments|' + this.questionId + '|' + (i - 1), commentBox.value);
      }
    }
  }
});

Here is the individual comment box code, console.logs were added for troubleshooting:

Qualtrics.SurveyEngine.addOnload(function() {
    var that = this;

    var commentId = 'comment_' + that.questionId;
    var commentValue = Qualtrics.SurveyEngine.getEmbeddedData('comments|' + that.questionId) || "";

    console.log("Embedded Data Value on Load: " + commentValue);

    var commentBox = document.createElement('textarea');
    commentBox.setAttribute('id', commentId);
    commentBox.setAttribute('rows', '2');
    commentBox.setAttribute('cols', '30');
    commentBox.setAttribute('placeholder', 'Enter your comments here');
    commentBox.value = commentValue;

    commentBox.addEventListener('input', function() {
        Qualtrics.SurveyEngine.setEmbeddedData('comments|' + that.questionId, commentBox.value);
        console.log("Input Event - Current Comment Box Value: " + commentBox.value);
    });

    var commentBoxDiv = document.createElement('div');
    commentBoxDiv.appendChild(commentBox);
    that.getQuestionContainer().appendChild(commentBoxDiv);
});

Qualtrics.SurveyEngine.addOnPageSubmit(function(type) {
    if (type === 'next' || type === 'previous') {
        var that = this;

        var commentId = 'comment_' + that.questionId;
        var commentBox = document.getElementById(commentId);
        if (commentBox) {
            Qualtrics.SurveyEngine.setEmbeddedData('comments|' + that.questionId, commentBox.value);
            console.log("On Page Submit - Current Comment Box Value: " + commentBox.value);
        }
    }
});