Error Using Ajax when I load from a differente file with Django

Question

Im using JaxaScript(Jquery with Ajax) and my HTML Page all in the same file, but when I tried to code my JS and HTML in different files, I get an error when trying to ajax with Django.

JS:

$(document).on('click', '#add-button', function (e) {
    e.preventDefault();

    value = $(this).data("forloopcounter");
    value = value - 1

    let variation_id = document.getElementsByClassName("select-variations")[value].attributes[2].nodeValue
    console.log(variation_id)
    $.ajax({
        type: "POST",
        url: '{% url "cart:add" %}',
        data: {
            variationid: variation_id,
            productquantity: 1,
            csrfmiddlewaretoken: "{{csrf_token}}",
            action: 'post'
        },
        success: function (json) {
            document.getElementById("cart-quantity").innerHTML = json.quantity
        },
        error: function (xhr, errmsg, err) {
            console.log(xhr)
        }
    });
})

Note: I have a guess it's because of this url: '{% url "cart:add" %}', but I don't know how to fix.

Note: when I ajax with all in the same page it works.

Note it's not an importation error, when i execute console.log it works

Error I get in the web: `jquery.min.js:4 POST http://127.0.0.1:8000/%7B%%20url%20%22cart:add%22%20%%7D 404 (Not Found)

HTML:

{% for variation in product.variation_set.all%}
                                   
                                    {%if forloop.first%}
                                    <!--pra fazer ajax passando id da variação selecionado(não aparece pra usuário)-->
                                    <small id="select-variations1" class="small select-variations"
                                        value="{{variation.id}}"></small>
                                    {%endif%}
                                    {%endfor%}`