plugins – How to fetch WordPress database values in JavaScript widget

I am making a WordPress widget. There are 4 screens of my widget with some input fields and buttons. on first load i display only first screen and hide the others. The idea is to display the second screen on button click, and at the same time take values from the first screen’s input fields, fetch data from WordPress database according to the input values in first screen, and display them on screen 2 and then hide the screen one, and so on with 2nd and 3rd screen. I am able to display and hide the screens with JavaScript but cannot use $wpdb inside javaScript to fetch the data according to the input values from the user on screen 1 and so on. Currently I have added the javascript inside the widget class and it is working. however i can eneque it properly as wll. here is my code. How can i fetch the valuese from database from within the database or may be any other way around. Thanks

    // Creating the widget 
    class mywidget extends WP_Widget {
      
        function __construct() {
        parent::__construct(
          
        // Base ID of your widget
        'nft_widget', 
          
        // Widget name will appear in UI
        __('CS Token Trading Widget', 'nft_widget_domain'), 
          
        // Widget description
        array( 'description' => __( 'POC Widget for Contact Square token trading', 'nft_widget_domain' ), ) 
        );
        }
          
        /*=============================
            Creating widget front-end
         ============================== */
          
        public function widget( $args, $instance ) {
        $title = apply_filters( 'widget_title', $instance('title') );
          
        // before and after widget arguments are defined by themes
        echo $args('before_widget');
        if ( ! empty( $title ) )
        echo $args('before_title') . $title . $args('after_title');
        
        //getting item price from the database
           
            function getItemPrice(int $iNumber){
                global $wpdb;
                $itemNumber = $iNumber;
                $result = $wpdb->get_col("SELECT itemprice FROM items WHERE item_number = '$itemNumber'");
                 $itemPrice = $result(0);
                 return $itemPrice;             
            }
          
        /***********************//// This is where you run the code and display the output/////**********************/
    
        //echo __( 'Hello, World!', 'nft_widget_domain' );?>
         <script type="text/javascript">
         document.addEventListener('DOMContentLoaded', function() {
    
             var checkbtn = document.getElementById('check-price-btn')
             checkbtn.onclick = function(){
                var secone = document.getElementById('sec1')
                secone.classList.toggle("hidden-section");
                var sectwo = document.getElementById('sec2')
                sectwo.classList.toggle("hidden-section");
             }
    
             var buybtn = document.getElementById('buy-btn')
             buybtn.onclick = function(){
                var sectwo = document.getElementById('sec2')
                sectwo.classList.toggle("hidden-section");
                var buysec = document.getElementById('buysec')
                buysec.classList.toggle("hidden-section");
             }
    
             var sellbtn = document.getElementById('sell-btn')
             sellbtn.onclick = function(){
                var sectwo = document.getElementById('sec2')
                sectwo.classList.toggle("hidden-section");
                var sellsec = document.getElementById('sellsec')
                sellsec.classList.toggle("hidden-section");
             }
            //var number;
            //var simple = '<?php echo getItemPrice(12345); ?>';
           // console.log(simple);  
    }, false);
         
         </script>
        <div id="sec1">        
            <label for="itemnumber">Item Number :</label>
            <input  type="number" id="itemnumber" name="itemnumber" placeholder= "Item Number" required oninput="this.value = this.value.replace(/(^0-9.)/g, '').replace(/(..*)./g, '$1');"><br><br>    
            <button id="check-price-btn">Check Latest Price</button>    
        </div>
        <div id="sec2" class="hidden-section">
            <label class="inline-element">Item Number: </label> <label class="inline-element item-number"></label><br><br>
            <label class="inline-element">Price Per unit: </label> <label class="inline-element price-unit"><?php echo getItemPrice(12345); ?></label>
            <label for="units"></label>
            <input class="unit-input" type="number" placeholder= "Units" required oninput="this.value = this.value.replace(/(^0-9.)/g, '').replace(/(..*)./g, '$1');">    
            <button id="buy-btn" class=" inline-element">Buy</button> 
            <button id="sell-btn" class="sell-btn inline-element">Sell</button> 
        </div>
        <div id="buysec" class="hidden-section">
            <label class="inline-element">Item Number: </label> <label class="inline-element item-number"></label><br><br>
            <label class="inline-element">Price Per unit: </label> <label class="inline-element price-unit"></label><br><br>
            <label class="inline-element">Units: </label> <label class="inline-element price-unit"></label><br><br>
            <label class="inline-element">FX Rate to USD : </label> <label class="inline-element price-unit"></label><br><br>
            <label class="inline-element">Total Price : </label> <label class="inline-element price-unit"></label><br><br>
            <button class="main-buy-btn">Buy</button>
        </div>
    
        <div id="sellsec" class="hidden-section">
            <label class="inline-element">Item Number: </label> <label class="inline-element item-number"></label><br><br>
            <label class="inline-element">Price Per unit: </label> <label class="inline-element price-unit"></label><br><br>
            <label class="inline-element">Units: </label> <label class="inline-element price-unit"></label><br><br>
            <label class="inline-element">FX Rate to USD : </label> <label class="inline-element price-unit"></label><br><br>
            <label class="inline-element">Total Price : </label> <label class="inline-element price-unit"></label><br><br>
            <button class="main-sell-btn">Sell</button>
        </div>  
    <?php    echo $args('after_widget');
}
              
    /*=====================
        Widget Backend 
     ======================*/
    public function form( $instance ) {
    if ( isset( $instance( 'title' ) ) ) {
    $title = $instance( 'title' );
    }
    else {
    $title = __( 'New title', 'nft_widget_domain' );
    }
    // Widget admin form
    ?>
    <p>
    <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label> 
    <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
    </p>
    <?php 
    }
          
    // Updating widget replacing old instances with new
    public function update( $new_instance, $old_instance ) {
    $instance = array();
    $instance('title') = ( ! empty( $new_instance('title') ) ) ? strip_tags( $new_instance('title') ) : '';
    return $instance;
    }
     
    // Class nft_widget ends here
    } 
     
     
    // Register and load the widget
    function wpb_load_widget() {
        register_widget( 'nft_widget' );
    }
    add_action( 'widgets_init', 'wpb_load_widget' );