Text-area's value's not being updated with .val()

Question

Photos of Problem [Please refer to this if my below explanation is confusing) https://i.stack.imgur.com/R6lf8.jpg

I'm attempting to get values (answers) from a page and inject those values (answers) into text-areas on the same page. So far this script is able to do exactly that, however even though the correct values (answers) are entered into the text-area, checking the answer results in the page telling me its incorrect.

However, if I type, let's say a 'space' in each text-area after all the correct values (answers) are injected and then re-check the answers the answer returns correct.

Additionally, physically clicking into the text-area and pressing enter results in it being incorrect, however clicking enter in the same text-area a second time then changes the answer to correct.

I'm not very experienced with jquery, or javascript in fact this is the first time I've used jquery. However, some possible problems that came to my mind were:

1. The page uses some other way other than html form-validation(?) to check values entered in the text-area

2. The text-area does not get updated until the user clicks in the text-area and types something into the box

   2a. I've attempted to use .focus, .sendkeys and keypress events to simulate the user typing in the box. (didn't work)

Eventually, I intend to make it so that it automatically submits all answers, which shouldn't be too difficult.

So I guess my main question is, how do I update the text-area's value even though the text-area's values have already been changed by

$( txtArea ).eq(h).val(ansTrim);.

chrome.runtime.onMessage.addListener(
 function(request, sender, sendResponse)
 {
  if( request.message === "clicked_browser_action" )
  {
   //Amount of text-area elements on page (found by class)
   var n = $(
      '.ember-view.ember-text-area.question-answer-textarea.min-width-text-area'
           ).length; 
   for (var i = n; i >= 0; i--)
   //click "Show Answer" for the amount of text-area elements there are
   {
    //The page requires you click Show Answer twice to confirm that you
    //want to see the answer
    $( ".ember-view.question-answer-show-button" ).eq(i).click(); 
    $( ".ember-view.question-answer-show-button" ).eq(i).click();

    for (var h = 0; h <= n; h++)\
    {
     //save all elements with the class
     var txtArea = $(
            ".ember-view.ember-text-area.question-answer-textarea.min-width-text-area"
        ); 
      //after answer is revealed stores the answer's text in firstAnswer
      var firstAnswer = $( ".question-answer" ).eq(h).text(); 
      //Orange check button stored in submitBTN for later functionality
      var submitBTN = $(".ember-view.question-answer-check-button")
      //Originally I thought that the answers weren't going through because 
      //the string saved in firstAnswer had an additional space 
      //in front and on the end
      var ansTrim = $.trim(firstAnswer); 

      //store keypress event in var press
      var press = jQuery.Event("keypress"); 
      press.ctrlKey = false;
      press.which = 32;
      console.log(ansTrim);
      //Fill each text area with the respective answer 

      $( txtArea ).eq(h).val(ansTrim); 
      /*
        $(submitBTN).click(function() {
          $(txtArea).change();
         });
      */
      //Above is my attempt at updating the textboxes with the values
      //in them (didn't work)
      }
    }
   }
 }
);