prepopulate input with ajax – TypeError: ‘stepUp’ called on an object that does not implement interface HTMLInputElement

Trying to prepopulate the runtime hours input on a modal form from the latest value in the db using ajax on a bootstrap page. When I try to fill it in, I get the error: TypeError: ‘stepUp’ called on an object that does not implement interface HTMLInputElement.

the PHP code to generate json

<?php
include('db.php');
include('function.php');
//error_reporting(E_ALL); 
//ini_set('display_errors', 1);
$compressor_hours = '';
//get the last read runtime hours of each compressor
$compressor_hours .= "SELECT MAX(r.id),
MAX(CASE c.compressor_name WHEN 'CM101' THEN c_r.runtime_hours END) AS runtime_hours1, 
MAX(CASE c.compressor_name WHEN 'CM201' THEN c_r.runtime_hours END) AS runtime_hours2, 
MAX(CASE c.compressor_name WHEN 'CM301' THEN c_r.runtime_hours END) AS runtime_hours3
FROM plant_readings r 
LEFT JOIN compressor_readings c_r ON c_r.plant_readings_id = r.id
LEFT JOIN compressors c ON c_r.compressor_id = c.id;";
//return one row of plant_readings_id | runtime_hours1 | runtime_hours2 | runtime_hours3
 
$statement = $connection->prepare($compressor_hours);
$statement->execute();
$result = $statement->fetchAll();
$data = array();
$filtered_rows = $statement->rowCount();

foreach($result as $row)
{
    $sub_array = array();
    $sub_array[] = $row["runtime_hours1"];  
    $sub_array[] = $row["runtime_hours2"];  
    $sub_array[] = $row["runtime_hours3"];  

     $data[] = $sub_array;
}
$output = array(
    "data" => $data
);
echo json_encode($output);
?>

Then the modal JS

$(document).ready(function(){
    $('#add_button').click(function(){
        $('#plant_readings_form')[0].reset();
        $('.modal-title').text("Add New Readings");
        $('#action').val("Add");
        $('#operation').val("Add");

        $.ajax({
            url:"fetch_prefill_data.php",
            method:"POST",
            data:{runtime_hours1: runtime_hours1,
                runtime_hours2: runtime_hours2,
                runtime_hours3: runtime_hours3},
            dataType:"json",
            success:function(data)
            {
                var runtime_hours1 = $('#runtime_hours1').val();
                var runtime_hours2 = $('#runtime_hours2').val();
                var runtime_hours3 = $('#runtime_hours3').val();
                runtime_hours1.val()=data.runtime_hours1;
                runtime_hours2.val()=data.runtime_hours2;
                runtime_hours3.val()=data.runtime_hours3;
            }
        })
    });

Any ideas what I’m doing wrong? The input field, whose name & id correspond does not get prefilled & throws the error.