Fields do not usually behave as expected if they are marked as read-only and filled via JavaScript. The form expects that "read-only" fields will not be updated by the user, so when you use JavaScript to make changes it does not always trigger the necessary events to tell the form that the change should be recorded.

One thing I do is remove the read-only attributes, update the value, then set the field as read-only again. This happens so fast it won't even be noticeable to the user, but it helps ensure the field gets updated.

// remove read only attributes
$('.myField input').removeAttr('readonly backend-readonly');

// set new value and trigger change event
$('.myField input').val('NEW VALUE').change();

// restore read only attributes
$('.myField input').attr({"readonly": true, "backend-readonly": true});

Another option is to use calculations. You could have a Hidden field that is not read only, use JS to update that field, then have a calculation in the read-only field that sets it equal to the one updated by JS.

For example, =Hidden_Field

I'm not sure what your value is or how it is derived, but if you could do it with calculations instead of JavaScript that would remove the need for JS entirely and more easily bypass the issue with the value not saving because even if a field is read-only, the calculations are an internal mechanism that Forms knows to track as a valid input changes.