JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" class="check" value="Remove Widget 1" data-widget-id="widget1"/>
<input type="button" class="check" value="Remove Widget 2" data-widget-id="widget2"/>
<input type="button" class="check" value="Remove Widget 3" data-widget-id="widget3"/>
<table>
    <tr>
        <td>
            Widget 1:
            <label>Checkbox <input type="checkbox" value="test1"/></label>
            <input type="hidden" value="widget1"/>
            <label>Checkbox <input type="checkbox" value="test2"/></label>
            <label>Checkbox <input type="checkbox" value="test3"/></label>
        </td>
    </tr>
    <tr>
        <td>
            Widget 2:
            <label>Checkbox <input type="checkbox" value="test1"/></label>
            <input type="hidden" value="widget2"/>
            <label>Checkbox <input type="checkbox" value="test2"/></label>
            <label>Checkbox <input type="checkbox" value="test3"/></label>
        </td>
    </tr>
    <tr>
        <td>
            Widget 3:
            <label>Checkbox <input type="checkbox" value="test1"/></label>
            <input type="hidden" value="widget3"/>
            <label>Checkbox <input type="checkbox" value="test2"/></label>
            <label>Checkbox <input type="checkbox" value="test3"/></label>
        </td>
    </tr>
</table>

JavaScript

// For testing only.
$(':checkbox').prop({disabled: true, checked: true});

$('.check').click(function(){
    var id = $(this).data('widget-id'),
        $td = $('table tr td input:hidden').filter(function(){
            return this.value == id;
        }).parent('td');

    if (confirm('This widget will be removed, ok?')) {
        $td.find(':checkbox').prop({disabled: false, checked: false});
    } else {
        $td.find(':checkbox').prop({disabled: true, checked: true});
    }
});