Как превратить подобный кусок html в json, а затем обратно?

это чтобы удобнее было смотреть :)

<div class="card mb-5 type-A">
    <button class="btn btn-sm btn-primary">
        <i class="fas fa-times"></i>
    </button>
    <div class="card-body">
        <div class="form-group">
            <h4>Тестовый заголовок вопроса</h4>
        </div>
        <div class="form-group">
            <p>Первый вариант ответа</p>
        </div>
        <div class="form-group">
            <p>Второй вариант ответа</p>
        </div>
        <div class="form-group">
            <p>Третий вариант ответа</p>
        </div>
        <div class="form-group">
            <p>Четвёртый вариант ответа</p>
        </div>
    </div>
</div>

А что вы хотите вообще от json и для чего?

Если хотите, чтобы этот код формировался с помощью jquery автоматически, то достаточно хранить только варианты ответа, что-то типа

data = {
    question: Тестовый заголовок вопрос,
    answers: [
        Первый вариант ответа,
        Второй вариант ответа,
        Третий вариант ответа,
        Четвертый вариант ответа,
    ]
};

И из этой записи генерировать html код,