Как получить выбранный <div> из цикла из нескольких <divs> в шаблоне Django

Я хочу сделать запись в базу данных с помощью кнопки, для которой у меня есть слушатель событий, который получает данные и делает ajax запрос.

Мой код выглядит следующим образом:

home.html ->

{% for fig in user_figs %}
<div class='card'>
{% if fig.chart %}
        <input type="hidden" id="card_chart" value="{{ fig }}"> 
        <input type="hidden" id="card_filter_id" value="{{ fig.filter_id }}">
        {{ fig.chart|safe }}
        {% endif %}
</div>
{% endfor %}

модель выглядит следующим образом:

class Card(models.Model):
    filter_id = models.CharField(max_length=120)
    title = models.CharField(max_length=120)
    chart = models.TextField()
    profile = models.ForeignKey(Profile, on_delete=models.CASCADE)
    dashboard = models.ForeignKey(Plot, on_delete=models.SET_NULL, null=True)
    created = models.DateTimeField(auto_now_add=True)
    updated = models.DateTimeField(auto_now=True)

    def save(self, *args, **kwargs):
        if(len(self.filter_id) == 0):
            self.filter_id = str(uuid.uuid1())
        super(Card, self).save(*args, **kwargs)

    def __str__(self):
    return f"Card title: {self.title} Card id: {self.filter_id}"

Слушатель событий в JS выглядит следующим образом:

save_changes_button.addEventListener('click', ()=>{
    console.log("SAVE CHANGES BUTTON CLICKED")
    const card_id = document.getElementById('card_filter_id').value
    console.log(card_id)
    const form_data = new FormData()
    form_data.append('csrfmiddlewaretoken', csrf_token)
    form_data.append('name', name_of_dashbaord)
    form_data.append('title', title)
    form_data.append('chart', fig)
    form_data.append('card_id', card_id)

    $.ajax({
        type: 'POST',
        url: '/card/save/',
        data: form_data,
        success: function(response){
            console.log(response)
        },
        error: function(error){
            console.log(error)
        },
        processData: false,
        contentType: false,
    })
})

теперь, когда пользователь нажимает на кнопку, я хочу сделать запись в базе данных, которая выглядит следующим образом:

def create_card_view(request):
    if(request.is_ajax()):
        name = request.POST.get('name')
        card_id = request.POST.get('card_id')
        author = Profile.objects.get(user=request.user)
        dashboard = Plot.objects.get(name=name)
        card = Card.objects.get(filter_id=card_id)
        card.dashboard = dashboard
        card.save()
        return JsonResponse({'msg': f'CARD ADDED TO DASHBOARD {dashboard.name} SUCCESSFUlLY BY {author}'})
    return JsonResponse({'msg': 'empty'})

проблема, которую я получаю, заключается в том, что

const card_id = document.getElementById('card_filter_id').value

всегда получает id последнего элемента в списке, так как выполняется цикл, и значение последнего элемента хранится здесь, но я хочу получить id той карточки, на которой была нажата кнопка. Как мне получить card_filter_id карточки, на которой пользователь нажал кнопку 'add to dashboard' (см. изображение фронтенда)

function myfunc(event){
  console.log(`Value : ${event.target.getAttribute('value')}`);
}

<input type="button" onclick="myfunc(event)"  value="1">
<input type="button" onclick="myfunc(event)"  value="2">
<input type="button" onclick="myfunc(event)"  value="3">
<input type="button" onclick="myfunc(event)"  value="4">