JSON add value on click

I'm trying to make a site of restaurant and now doing some table reservation. So far have one problem: I have a JSON of tables and want to add date (day/time) to it, when table was clicked. The problem's next - when I click on some table, the date adds to all JSON elements. And I wand to add it only to the element I clicked. Here is link to codepen: https://codepen.io/wilchilly/pen/qBEvegW (To see the result click on some table and open console)

My HTML:

<p class="href-to italic" id="showMore">Show tables</p>

<div class="wrapper" id="wrapper">
  <div class="tables-wrapper" id="tables-wrapper"></div>
</div>

JS:

fetch('tables.json')
.then(response => response.json())
.then(json => {
    const myJson = json;
    let showTables = document.getElementById('showMore');

    //show elements on page
    function loadGoods(data) {
        let out = '';
        for (let key in data) {
            if (data[key].isAvailable == false) {
                out += '<div class="single-table not-available"  data-name="' + data[key]['name'] + '" data-art="' + data[key]['id'] + '">';
                out += '<h4>' + data[key]['name'] + '</h4>';
                out += '<p>' + data[key]['location'] + '</p>';
                out += '</div>';
            } else {
                out += '<div class="single-table"  data-name="' + data[key]['name'] + '" data-art="' + data[key]['id'] + '">';
                out += '<h4>' + data[key]['name'] + '</h4>';
                out += '<p>' + data[key]['location'] + '</p>';
                out += '</div>';
            }
        }

        $('#tables-wrapper').html(out);
    }

    //set Date (day/time)
    function setDate() {
        for (let key in myJson) {
            myJson[key]['date']['day'] = '10/02';
            myJson[key]['date']['time'] = '20:00';
        }
        console.log(myJson);
    }

    showTables.addEventListener('click', function () {
        loadGoods(myJson);

        let singleTable = document.getElementsByClassName('single-table');
        Array.from(singleTable).forEach(function (element) {
            element.addEventListener('click', setDate);
        });
    });

})

JSON:

    [
    {
        "id": 0,
        "index": 0,
        "name": "Table 1",
        "capacity": 5,
        "isAvailable": true,
        "location": "Bar",
        "date": {
            "day": "",
            "time": ""
        }
    },
    {
        "id": 1,
        "index": 1,
        "name": "Table 2",
        "capacity": 5,
        "isAvailable": true,
        "location": "Patio",
        "date": {
            "day": "",
            "time": ""
        }
    },
    {
        "id": 2,
        "index": 2,
        "name": "Table 3",
        "capacity": 5,
        "isAvailable": true,
        "location": "Bar",
        "date": {
            "day": "",
            "time": ""
        }
    },
    {
        "id": 3,
        "name": "Table 4",
        "capacity": 6,
        "isAvailable": true,
        "location": "Inside",
        "date": {
            "day": "",
            "time": ""
        }
    }
]