How to pass parameters to a Django url using javascript

Question

I am new to the stack overflow platform and also in web programming, I am trying to build a program for restaurant.

In my views, I sent two models of Django (Product and Table), these tables have no relationship.

class ListarProdutos(ListView):
    model = Produto
    template_name = 'produto/produto_listar.html'
    context_object_name = 'produtos'
    paginate_by = 10
    ordering = ['-id']
    
    
    def get_context_data(self, **kwargs):
        context = super(ListarProdutos, self).get_context_data(**kwargs)
        context['mesas'] = Mesa.objects.order_by('id').all()
        return context
      

Part of the html file looks like this :

<div class="container">
<div class="row ">
    
    <div class="col-12 col-md-2">
                  
        <form class="justify-content-center justify-content-md-start mt-2 mb-3 mb-md-1">
            <select name="mesas" id="mesa class="select-texto font-select"> 
                
                
                {% for mesa in mesas %}  
                {% if request.user.is_authenticated %} 
            
            <option value="{{ mesa.numero }}">

                Mesa {{ mesa.numero }}
            </option>

            {% endif %} 
            {% endfor %} 

        </select>

    </form>

    </div> 


{% for produto in produtos %}
        
    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 d-flex align-items-stretch">
        <div class="card text-center zoom">
            <div class="form-group">
                    
            {% if produto.imagem %} 
        
           
            <img  class=" detalhe-img card-img-top" src="{{ produto.imagem.url }}" alt="{{ produto.nome }}">
          
            {% endif %}
            
            <div class="card-header text-nowrap">
            <h6 class="card-title">{{ produto.produto }}</h6>

               
        <hr>
    {% if produto.preco_venda_promocional > 0 %}
                   
    <span class="product-price"> 
        {{ produto.preco_venda_promocional|formata_preco }}
    </span>

    <span class=" product-old-price text-muted">
        {{ produto.preco_venda|formata_preco }}
    </span>
    {% else %}
    <span class="product-price"> 
        {{ produto.preco_venda|formata_preco }}
    </span>         
    {% endif %}
      
    <div class="card-footer bg-transparent border-top-light-custom text-center">
        <a href="{% url 'produto:adicionar_pedido' produto.id  %}?get_parameter_name="{{ mesa.numero }}"   class="btn btn-outline-primary2-listar btn-block">
            <i class="fa fa-shopping-cart" aria-hidden="true"></i>
             Adicionar 
              
        </a>
       
    </div>

</div>  


{% endfor %}

Note: I took the closure of the for loop (performed on the tables key) and put after the tag (which represents the sending button of the objects), so I can take the table number and pass as parameter without the need for javascript, however, the html page gets all disconfigured because it conflicts with the other loop is realized in key products.

I have two doubts :

1. How can I take the selected table number in select/option with javascript, and pass it as a parameter in that url:

{% url 'product:add_request' product.id %}? get_parameter_name="{{ mesa.numero received through javascript }}, which will send the information to be processed in the Django views file, as follows:

name_number = self.request.GET.get('get_parameter_name', None) # Here I take the table number

producto_id = Product.objects.get(id=self.kwargs['pk']) # Here I take the product id

2. How can I keep the selected table number option in the html select/option, even after the page is updated.

I thank all who can help me.