How to send information between two html using json and POST?

In ‘cart.html’ I have a form of id=”order-selection-cart” which is for selecting user’s order, which the user wants to make payment for.

<select id="order-selection-cart" onchange="order_cart()" class="form-control">
          {% for order in orders_for_user %}
              <option>{{order.id_zamowienie}}</option>
          {% endfor %}
</select>

In the same html page, I also display the selected order value ({{order.id_zamowienie}} in a form of id=”order-selection-cart”:

<div class="row cart-box" style="background-color:rgb(226, 226, 226);">
            <h10>Szczegóły zamówienia </h10>
            <h4 type="value" id="order-details"></h4>
</div>

Now, I want to go to ‘checkout.html’ by clicking a button of name ‘Zamawiam’ and I have done it like this:

<div class="row cart-box" style="background-color:rgb(226, 226, 226);">
            <h4>Suma zamówienia</h4>
            <h10>Suma: {{cart_total|floatformat:2}} zł</h10>
            <br>
            <a class="btn btn-primary" href="{% url 'checkout' %}" role="button">Zamawiam</a>
</div>

This code works, but I have a problem with remembering selected user’s order which he wants to make payment for. Let’s say I selected option 2, I want to remember it and when clicked ‘Zamawiam’ I want to go to ‘checkout.html’ where this value (2) can be accessed and not changed when it is again changed (if user changes it in cart.html in other window for example). At first I have had js code which was changing value of selected option in ‘cart.html’:

// ordernumber update in cart.html
function order_cart() {
    let user = '{{request.user}}'
    let select = document.getElementById('order-selection-cart');
    let select1 = document.getElementById('order-details');

    let value = select.options[select.selectedIndex].value;
    select1.innerHTML = value;
}

Then I thought of adding a POST method, but it would be run every time user changes his order in cart.html. I want to run a POST method each time a user clicks ‘Zamawiam’ with content of current order option which was selected by user. I also would like to ask how to then access ‘order_number’ in a checkout.html code.

// ordernumber update in cart.html
function order_cart() {
    let user = '{{request.user}}'
    let select = document.getElementById('order-selection-cart');
    let select1 = document.getElementById('order-details');

    let value = select.options[select.selectedIndex].value;
    select1.innerHTML = value;

    // send information about selected option to 
    alert('USER:', user)
    if(user === 'AnonymousUser'){
        console.log('Not logged in')

        // TODO: delete it once login is done 
        update_order_number(value);
    }else{
        update_order_number(value);
    }

}

function update_order_number(order_number){
    console.log('User is logged in, sending data...')

    let url = '/checkout/'

    // whenever we are sending POST data to the backend in Django, is we need to send CSRF token
    fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            'order_number': product_id// body data type must match "Content-Type" header
        })
    })


    .then((response) => {
                return response.json()
            })

            .then((data) => {
                console.log('data: ', data)
            })
}