Перенести данные из ячейки html таблицы в input форму скриптом JS

Есть страница сайта, состоит из формы для ввода данных:
И списка из так сказать карточек этих самых данных:
Так же в каждой карточке есть кнопка "Редактировать"
Сейчас она выглядит так:

<button class="scroll-top">Редактировать</button>
<script>
document.body.addEventListener('click', e => {
    if (e.target.classList.contains('scroll-top')) window.scrollTo(pageYOffset, 0);});
</script>

т.е. только скролл наверх
Хочу чтобы при нажатии на неё, все данные из карточки переместились в форму ввода данных
Там я их мог бы отредактировать, нажать кнопку отправить и уже на сервере всё отредактировать как надо

Как я вывожу на страницу карточки с данными. Все они хранятся в json файле, у каждой из них есть уникальный id. Далее собственно в цикле вывожу в html. (часть кода поскрывал, чтобы по компактнее было)

{% for transport_company, invoice_number, comment, date, city, status, type, id, data_table in table %}
<div class="col-md-12 col-xl-5">
    <div class="card card-social">
        <div class="card-block">
            <div class="table-responsive">
                <table class="table table-bordered">
                    <tbody>
                    <tr>
                        <td class="text-center">ТК</td>
                        <td class="text-center">{{ transport_company }}</td>
                        <td class="text-center">ТТН</td>
                        <td class="text-center">{{ invoice_number }}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-block">
            <div class="table-responsive">
                <table class="table">
                    <thead>
                    <tr>
                        <th class="text-center">Артикул общий</th>
                        <th class="text-center">Артикул на МП</th>
                        <th class="text-center">Количество</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for offer_crm, offer_mp, count in data_table %}
                    <tr>
                        <td class="text-center">{{ offer_crm }}</td>
                        <td class="text-center">{{ offer_mp }}</td>
                        <td class="text-center">{{ count }}</td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <button class="scroll-top">Редактировать</button>
        </div>
    </div>
</div>
{% endfor %}

Сейчас я так понимаю у меня все кнопки одинаковые и их нельзя связать с "карточками", и думаю логика должна быть что я беру id который уже есть в таблице и задаю его кнопке редактировать, по типу(атрибут наверное только не класс нужен):

<button class="scroll-top{{ id }}">Редактировать</button>

Либо может надо id задать и в таблицу и в кнопку, тогда ещё проще будет их соединить, но может и ошибаюсь
Тогда у меня будет блок с данными "карточки" и уникальная кнопка рядом
Дальше остается как то получить данные из двух таблиц которые находятся ближе всего к кнопке которую нажал пользователь и перенести в форму вверху страницы

Вариант @SwaD подходит, так и сделаю