I am trying to push objects to an array from a click event. The array appears to hold only one object although the template shows more than one.

I have html with data attributes to pass franchise id and name values to a twig template from the controller like this:

```
<a
    data-id="{{ franchise.franchise_id }}"
    data-name="{{ franchise.franchise_name }}"
    class="btn add-to-list">
    Add to List
</a>

```

This code repeats based on the query results.

When the anchor tag is clicked, id and name are stored in variables, which are put into an object (franchise), which is then pushed onto the array (franchises). Here's the jQuery:

```
$(".add-to-list").on('click', () => {
    let franchises = [];
    let franchise;

    let id = $(this).data("id");
    let name = $(this).data("name");

    franchise = {
        'id': id,
        'name': name
    };

    franchises.push(franchise);

    $.each(franchises, (index, value) => {
        $("#choices").append('<a class="list-group-item" id='+value.id+'> ' + value.name + '<span class="pull-right">&times;</span></a>');
    });
});

```

The franchises array is looped thru and the data displays in the template. The results show more than one item in the array, but console.log(franchises.length) shows one item after each click of the anchor tag. It seems like after the second item is clicked and it displays in the template that the console log should show one array with two objects rather than array with the object data that I just clicked.

The console.log displays this in conjunction with two clicks on different anchor tags:

```
Add to List clicked!
====== start ============
{id: 2, name: "Crunch"}
franchises.length: 1
====== end ===========
Add to List clicked!
====== start ============
{id: 1, name: "Planet Fitness"}
franchises.length: 1
====== end ===========

```

If anyone can identify my error(s), I would appreciate the help.

Thanks!