Как собрать все объекты с html в json?

У меня есть html страница, в ходе работы с которой и исходя из того что выбирает юзер на ней появляются селекты, инпуты(оооочень много).

вот примерный код:

<div class="container">
<div class="wrapper">
    <div class="item">
        <div class="col-md-6">
            <label>First select:</label>
        </div>
        <div class="col-md-6">
            <select>
                <option value="opt1">Option 1</option>
                <option value="opt2">Option 2</option>
                <option value="opt3">Option 3</option>
            </select>
        </div>
    </div>
    <template class="opt1">
        <div class="item">
            <div class="col-md-6">
                <label>Select for option 1:</label>
            </div>
            <div class="col-md-6">
                <select>
                    <option value="opt11">Option 1.1</option>
                    <option value="opt21">Option 2.1</option>
                    <option value="opt31">Option 3.1</option>
                </select>
            </div>
        </div>          
    </template>
    <template class="opt2">
        <div class="item">
            <div class="col-md-6">
                <label>Some text:</label>
                <input type="number" min="0" />
            </div>
            <div class="col-md-6">
                <label>Some text:</label>
                <input type="text" />
            </div>
        </div>
    </template>
</div>
<button type="submit">Submit</button>
</div>

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