I have three input type number fields as fields in a meta box. They can be filled, they save, they are updated with last inputs and everything is fine.

The IDs are:
nutrix_preparation_time
nutrix_cooking_time
nutrix_waiting_time

Now, I want to get sum up these fields live and show the result in another field with id

nutrix_total_time

The fields:

// PREPARATION TIME FIELD
    $html = '';  
    $label = __( 'Preparation Time (min): ', 'nutrix' ); 
    $current_preptime = get_post_meta( $post_object->ID, 'nutrix_preparation_time', true );

    $html .= '<div class="nutrix-div-25"><p><label for="nutrix_preparation_time">' . $label . '</label><br /><input type="number" id="nutrix_preparation_time" name="nutrix_preparation_time" value="' . $current_preptime . '" min="0" />';

    $html .= '</input></p></div>';

    echo $html;

    // COOKING TIME FIELD
    $html = '';  
    $label = __( 'Cooking Time (min): ', 'nutrix' ); 
    $current_cooktime = get_post_meta( $post_object->ID, 'nutrix_cooking_time', true );

    $html .= '<div class="nutrix-div-25"><p><label for="nutrix_cooking_time">' . $label . '</label><br /><input type="number" id="nutrix_cooking_time" name="nutrix_cooking_time" value="' . $current_cooktime . '" min="0" />';

    $html .= '</input></p></div>';

    echo $html;

    // WAITING TIME FIELD
    $html = '';  
    $label = __( 'Waiting Time (min): ', 'nutrix' ); 
    $current_waittime = get_post_meta( $post_object->ID, 'nutrix_waiting_time', true );

    $html .= '<div class="nutrix-div-25"><p><label for="nutrix_waiting_time">' . $label . '</label><br /><input type="number" id="nutrix_waiting_time" name="nutrix_waiting_time" value="' . $current_waittime . '" min="0" />';

    $html .= '</input></p></div>';

    echo $html;

    // TOTAL TIME FIELD
    $html = '';  
    $label = __( 'Total Time (min): ', 'nutrix' ); 
    $current_totaltime = get_post_meta( $post_object->ID, 'nutrix_total_time', true );

    $html .= '<div class="nutrix-div-25"><p><label for="nutrix_total_time">' . $label . '</label><br /><input type="number" id="nutrix_total_time" name="nutrix_total_time" value="' . $current_totaltime . '" min="0" readonly />';

    $html .= '</input></p></div>';

    echo $html;

The JS File (loaded in plugins function file)

$(function(){
            $('#nutrix_preparation_time, #nutrix_cooking_time, #nutrix_waiting_time').keyup(function(){
               var value1 = parseFloat($('#nutrix_preparation_time').val()) || 0;
               var value2 = parseFloat($('#nutrix_cooking_time').val()) || 0;
               var value3 = parseFloat($('#nutrix_waiting_time').val()) || 0;
               $('#nutrix_total_time').val(value1 + value2 + value3);
            });
         });

I used a working example to create the function for JS (https://codepen.io/w3programmings/pen/zzrKwr – Thanks to that by the way).

But for some reason, the value of the nutrix_total_time field does not change.
I also tried to remove the value attribute in nutrix_total_time or just set it to “”, but nothing changes.

Looking forward for any idea

Thanks in advance