Problem with using HTML form data in javascript functions

Recently I have been trying to change my code that took one HTML user input and used it in a javascript function. To do this I put the input into a query string and that worked fine. Then I tried to add another input. This is currently the form part of my code.

<form onsubmit="bazaartable()" class="pb-1">
    <div>
        <label>Please enter your tax rate here <i>(If not entered will use 1%)</i>:</label>
        <input type="text" id="taxRateForm" class="border border-cyan-500 rounded"/>
    </div>

    <div>
        <label><i>Enter unique amount here if needed</i>:</label>
        <input type="text" id="amountForm" class="border border-cyan-500 rounded"/>
    </div>
    
    <input type="submit" class="bg-cyan-500 py-1 px-1 rounded"/>
</form>

This is some of my javascript code including the function bazaartable.

<script>
    function takevalue1(){
        var taxRate = document.getElementById("taxRateForm").value;
        if (taxRate < 1){
                taxRate = 1
        }
        return taxRate
    }

    function takevalue2(){
        var amount = document.getElementById("amountForm").value;
        return amount
    }
    
    console.log(takevalue1())
    console.log(takevalue2())

    function bazaartable(){
    getbazaar = () => new Promise(a => getbazaar.data && !a(getbazaar.data) || fetch("https://api.hypixel.net/skyblock/bazaar").then(x => a(getbazaar.data = x.json())));
    document.getElementById("bazaar").innerHTML = arrayToTable([["Item Name", "Price x1 -0.1 Including Tax", "Price x64 -0.1 Including Tax", "x" + takevalue2()]], '<div class="row">{{content}}</div>', '<div class="column">{{content}}</div>');
    getbazaar().then(makeArray).then(x => arrayToTable(x, '<div class="row">{{content}}</div>', '<div class="column" title="{{content}}">{{content}}</div>')).then(x => document.getElementById("bazaar").innerHTML += x);
    }

    var iLikeThese = ["ENCHANTED_SNOW_BLOCK", "ENCHANTED_POTATO", "ENCHANTED_CARROT", "ENCHANTED_CLAY_BALL", "ENCHANTED_DIAMOND", "ENCHANTED_REDSTONE_BLOCK", "PACKED_ICE", "ICE"];
    
    function makeArray(data) {
        var arr = [];
        for (var i in data.products) {
            if (!iLikeThese.includes(i)) continue;
            var price = null;
            try {
                price = data.products[i].buy_summary[0].pricePerUnit
                price = price -= .1
                priceAfterTax = (price - (takevalue1()/100 * price))
            } catch (e) {}
            arr.push([i.replace(/_/g, " ").toLowerCase(), priceAfterTax.toFixed(1), (priceAfterTax*64).toFixed(1), (priceAfterTax*takevalue2()).toFixed(1)]);
        }
        return arr.sort((a, b) => a[0] > b[0] ? 1 : -1);
    }

    function arrayToTable(arr, row, column) {
        var result = "",
            substr = "";
        for (var i = 0; i < arr.length; i++) {
            substr = "";
            for (var j = 0; j < arr[i].length; j++) {
                substr += column.replace(/{{content}}/g, arr[i][j]);
            }
            result += row.replace(/{{content}}/g, substr);
        }
        return result;
    }
</script>

I have tried making takevalue1&2 return numbers but that and that works. The only thing that I can think of is that clicking the button clears the inputs before the function can read the values. If anyone can help please reply!