Javascript code will not execute 2 different codes when click 2 different buttons

Hello i am making two graphs with ChartJs the code works good but i have 2 graphs that get different values from different api, the code is the same just the api url changes and few variable names but what happens one graph is filled with the both api values, i need both graphs filled with the specific values filled. This is my code so far:

HTML:

<div class="graph">

        <label for="startdateOutlay">Start Date</label>
        <input type="date" name="startdateOutlay" id='startdateOutlay' value="{{date("Y-m-d",strtotime('monday this week'))}}"/>
        <label for="enddateOutlay">End Date</label>
        <input type="date" name="enddateOutlay" id="enddateOutlay" value="{{date("Y-m-d",strtotime('sunday this week')) }}"/>
        <button type="submit" id="outlayButton" onclick="getOutlayData()" >Shfaq vlerat</button>

    <div class="card text-center m-5">
        <div class="card-header">
            <h2>Currency Outlay</h2>
        </div>
        <canvas id="outlayGraph" ></canvas>
    </div>

        <label for="startdateReceived">Start Date</label>
        <input type="date" name="startdateReceived" id="startdateReceive" value="{{date("Y-m-d",strtotime('monday this week'))}}"/>
        <label for="enddateReceive">End Date</label>
        <input type="date" name="enddateReceive" id="enddateReceive"  value="{{date("Y-m-d",strtotime('sunday this week')) }}"/>
        <button type="submit" id="receiveButton" onclick="getCashReceivedData()" >Shfaq vlerat</button>


    <div class="card text-center m-5">
        <div class="card-header">
            <h2>Cash Received</h2>
        </div>
        <canvas id="cashReceivedGraph" ></canvas>
    </div>
    </div>
    @endcan
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

JavaScript:

<script>

    window.onload = function () {

        getOutlayData();
    }

    var albanianLek = [], americanDollar = [], euro = [], britishPound = [], created_date = []

    var cashAlbanianLek = [], cashAmericanDollar = [], cashEuro = [], cashBritishPound = [], cashCreated_date = []

    let chart;

    async function outlayGraph() {

        const ctx = document.getElementById('outlayGraph').getContext('2d');

        const data = {
            labels: created_date,
            datasets: [{
                label: 'ALL',
                borderColor: 'rgb(255, 0, 0)',
                data: albanianLek
            },
                {
                    label: 'GBP',
                    borderColor: 'rgb(255, 0, 255)',
                    data: britishPound
                },

                {
                    label: 'USD',
                    borderColor: 'rgb(0, 153, 0)',
                    data: americanDollar
                },

                {
                    label: 'EUR',
                    borderColor: 'rgb(0, 0, 255)',
                    data: euro
                },

            ]
        };

        const config = {
            // The type of chart we want to create
            type: 'line',
            // The data for our dataset
            data,
            // Configuration options go here
            options: {
                tooltips: {
                    mode: 'index'
                }
            }
        };

        if (chart) {
            chart.data.labels = created_date;
            chart.data.datasets[0].data = albanianLek;
            chart.data.datasets[1].data = britishPound;
            chart.data.datasets[2].data = americanDollar;
            chart.data.datasets[3].data = euro;
            chart.update();
        } else {
            chart = new Chart(ctx, config);
        }
    }

    function getOutlayData() {

        var startdate = document.getElementById('startdateOutlay');

        var enddate = document.getElementById('enddateOutlay');

        const apiUrl = `/api/outlay?startdate=${startdate.value}&enddate=${enddate.value}`;

        $.ajax({
            type:'GET',
            url:apiUrl,
            dataType: "json",
            success:function(data) {
                const jsonValues = data.data
                fillOutlayGraph(jsonValues);
                outlayGraph();
            }
        });
    }

    //Fetch Data from API
     function fillOutlayGraph(barChatData) {

        const allValues = [], usdValues = [], eurValues = [], gbpValues = [], dateValues = [];

        for (let i = 0; i < barChatData.length; i++) {

                const item = barChatData[i];

                if (item.currencies.ALL == null) {

                    allValues.push("0");
                } else {

                    allValues.push(item.currencies.ALL);
                }

                if (item.currencies.USD == null) {

                    usdValues.push("0");
                } else {

                    usdValues.push(item.currencies.USD);
                }

                if (item.currencies.EUR == null) {

                    eurValues.push("0");
                } else {

                    eurValues.push(item.currencies.EUR);
                }

                if (item.currencies.GBP == null) {

                    gbpValues.push("0");
                } else {

                    gbpValues.push(item.currencies.GBP);
                }

               dateValues.push(item.date);
        }

        albanianLek = allValues;
        britishPound = gbpValues;
        americanDollar = usdValues;
        euro = eurValues;
        created_date = dateValues;
    }

//================Receive Cash Graph===================

    function getCashReceivedData() {
        var startdate = document.getElementById('startdateReceive');

        var enddate = document.getElementById('enddateReceive');

        const apiUrl = `/api/received?startdate=${startdate.value}&enddate=${enddate.value}`;

        $.ajax({
            type:'GET',
            url:apiUrl,
            dataType: "json",
            success:function(data) {
                const jsonValues = data.data
                fillCashReceivedGraph(jsonValues);
                cashReceivedGraph();
            }
        });
    }

    async function cashReceivedGraph() {

        const ctx = document.getElementById('cashReceivedGraph').getContext('2d');

        const data = {
            labels: cashCreated_date,
            datasets: [{
                label: 'ALL',
                borderColor: 'rgb(255, 0, 0)',
                data: cashAlbanianLek
            },
                {
                    label: 'GBP',
                    borderColor: 'rgb(255, 0, 255)',
                    data: cashBritishPound
                },

                {
                    label: 'USD',
                    borderColor: 'rgb(0, 153, 0)',
                    data: cashAmericanDollar
                },

                {
                    label: 'EUR',
                    borderColor: 'rgb(0, 0, 255)',
                    data: cashEuro
                },

            ]
        };

        const config = {
            // The type of chart we want to create
            type: 'line',
            // The data for our dataset
            data,
            // Configuration options go here
            options: {
                tooltips: {
                    mode: 'index'
                }
            }
        };

        if (chart) {
            chart.data.labels = cashCreated_date;
            chart.data.datasets[0].data = cashAlbanianLek;
            chart.data.datasets[1].data = cashBritishPound;
            chart.data.datasets[2].data = cashAmericanDollar;
            chart.data.datasets[3].data = cashEuro;
            chart.update();
        } else {
            chart = new Chart(ctx, config);
        }
    }

    function fillCashReceivedGraph(barChatData) {

        const allValues = [], usdValues = [], eurValues = [], gbpValues = [], dateValues = [];

        for (let i = 0; i < barChatData.length; i++) {

            const item = barChatData[i];

            console.log(item.currencies.ALL);
            if (item.currencies.ALL == null) {

                allValues.push("0");
            } else {

                allValues.push(item.currencies.ALL);
            }

            if (item.currencies.USD == null) {

                usdValues.push("0");
            } else {

                usdValues.push(item.currencies.USD);
            }

            if (item.currencies.EUR == null) {

                eurValues.push("0");
            } else {

                eurValues.push(item.currencies.EUR);
            }

            if (item.currencies.GBP == null) {

                gbpValues.push("0");
            } else {

                gbpValues.push(item.currencies.GBP);
            }

            dateValues.push(item.date);
        }

        cashAlbanianLek = allValues;
        cashBritishPound = gbpValues;
        cashAmericanDollar = usdValues;
        cashEuro = eurValues;
        cashCreated_date = dateValues;
    }
</script>