JSFiddle - React, Tailwind, and code Playground

HTML

<div class="questionRow">
    <input type="checkbox" class="extraOption" checked="checked" />
    <input type="text" class="text" />
    <input type="date" class="date" />
    <span class="dateSpan">asdf</span>
    <textarea class="textareaResize"></textarea>
    <input type="checkbox" class="checkbox" />
</div>

<div class="questionRow">
    <input type="checkbox" class="extraOption" />
    <input type="text" class="text" />
    <input type="date" class="date" />
    <span class="dateSpan">asdf</span>
    <textarea class="textareaResize"></textarea>
    <input type="checkbox" class="checkbox" />
</div>

<div class="questionRow">
    <input type="checkbox" class="extraOption" checked="checked" />
    <input type="text" class="text" />
    <input type="date" class="date" />
    <span class="dateSpan">asdf</span>
    <textarea class="textareaResize"></textarea>
    <input type="checkbox" class="checkbox" />
</div>

JavaScript

jQuery.fn.extend({
    toggleAnswers: function (disable) {
        return this.each(function (idx, el) {
            var $group = $(el);
            $group.find(".date, .text, .textareaResize, .checkbox").prop("disabled", disable);
            $group.find(".date, .textareaResize, .text").val("");
            $group.find(".dateSpan").toggle(!disable);
        });
    }
});

$("input.extraOption[checked]").each(function() {
    $(this).closest(".questionRow").toggleAnswers(true);
});