Get an ID just created without reloading the page

Here is a div that I append in AJAX with a script (at the bottom of the TWIG file) :

    <div>
        {% for vote in proposal.votes %}
            {% if app.user == vote.user %}
                <a href="{{ path('vote_delete',{'proposal' : proposal.id, 'vote' : vote.id}) }}" 
                    class="btn btn-light ml-1 btn-sm">
                </a>
            {% endif %}
        {% endfor %}
    </div>

If I then click on the freshly appended button, it returns an error because the ID “vote.id” is still 0 until I reload the page and the ID gets found…

Is there a way to trigger the for loop without reloading the page to get the ID directly after its creation? Is it linked with “async” or any “ready” function?

EDIT :

The script that appends the div #deleteVote when I vote :

$(document).on('click', '.votedFullAgreement', function (event){
    event.preventDefault();
    $.ajax({
        url: '{{ path('vote_add', {'slug' : slug, 'proposal' : proposal.id, 'userVote' : 'votedFullAgreement', 'user' : app.user.id }) }}',
        type: 'POST',
        dataType: 'html',
        success: function (){
            if( $('#deleteVote').length === 0 ) {
                //The whole HTML of the div
        },
        error: function (resultat, statut, erreur) {
            console.error(erreur);
        }
    });
});

The #deleteVote that gets appended, with the url of the “deleteVote” function (which needs to know the ID of the vote to delete) :

$(document).on('click', '.deleteVote', function (event){
    event.preventDefault();
    $.ajax({
        url: '{{ path('vote_delete', {'slug' : slug, 'proposal' : proposal.id, 'vote' : vote.id }) }}',
        type: 'POST',
        dataType: 'html',
        success: function (){
            $('#deleteVote').slideUp();
        },
    });
});

Answer

As I’ve mentioned in the comments, you can’t pass a javascript directly to twig, as twig is rendered serverside. One way to solve this is to calculate all the path beforehand:

{% for vote in proposal.votes %}
    ...
    <button type="button" class="votedFullAgreement" data-path="{{ path('vote_add', {'slug' : slug, 'proposal' : proposal.id, 'userVote' : 'votedFullAgreement', 'user' : app.user.id }) }}">Add vote</button>
    ...
{% endfor %}

Now you can access the path directly in javascript

$(document).on('click', '.votedFullAgreement', function (event){
    event.preventDefault();
    $.ajax({
        url: $(this).data('path'),
        type: 'POST',
        dataType: 'html',
        success: function (){
            if( $('#deleteVote').length === 0 ) {
                //The whole HTML of the div
        },
        error: function (resultat, statut, erreur) {
            console.error(erreur);
        }
    });
});

---

You could also make an extra request to a controller to generate the path, but this would mean you would need to pass all the variables, e.g. slug, app.user.id, …

More information on how to generate a path inside a controller can be found here