Integrate second textbox showing a predefined value after scoring the question values

Hello Qualtrics Community,
I am currently using code that enters a pre-specified value (defined in variable sum) into a textbox, which I thankfully got from another community member:
    var all_questions = [];
    var display_cal;
    document.querySelectorAll("div[id^=QID]:not(.Separator)").forEach((question) => {
        if (question.className.includes("TE")) {
            display_cal = question.querySelector("input");
        } else {
            all_questions.push(question);
        }
    });

    display_cal.readOnly = true;
    display_cal.style.cursor = "not-allowed";

    function cal_sum() {
        var sum = 0;
        all_questions.forEach((question, which_q) => {
            question.querySelectorAll(".q-checkbox").forEach((chkbox, which_o) => {
                if (chkbox.className.includes("q-checked")) {
                    sum += Object.values(q_weights)[which_q][which_o];
                }
            });
        });
        display_cal.value = sum;

where q_weights is a variable that was specified earlier in the code.
I now would like to use a second textbox on the same page, which displays a different value I would specify or alternatively adjust the textbox so that it shows the value of the sum variable as well as the newly specified variable I would call sum2.
In the second option, it would need to be apparent which value is which, i.e. the output should read something like:
"The finished product will cost $ sum.toString() and have sum2.toString() calories"
Is there a way to make this happen?

Thank you very much,
Valerie