JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <input id="checkit" type="checkbox">
    <input  id="thecontent" type="text" style="display: none;">
    <button id="test">Test it</button>
</div>

JavaScript

window.test = {
    item1:{
        subitem1: "",
        subitem2: "",
        subitem3: "",
        subitem4: ""
    }
};

$('.wrapper').on('change', '#checkit', function(){
    if(this.checked) {
        $('#thecontent').show().trigger("change");
    }
    else{
        $('#thecontent').hide();
        
        //This part probably needs to be reset in a different way
        test.item1.subitem1 = "";
    }
});

$('.wrapper').on('change', '#thecontent', function(){
    var theContent = $(this).val();
    test.item1.subitem1 = theContent;
});

$('.wrapper').on('click', '#test', function(){
    console.log(test);
});