JSFiddle - React, Tailwind, and code Playground

by sushanth009

HTML

<input type="checkbox" value="NOT" name="size">NOT<br />
<input type="checkbox" value="THA" name="size">THA<br />
<input type="checkbox" value="TAB22" name="size">TAB22<br />

CSS

.inputArea
{
    background-color: orange;
    width:100px;
    height: 50px;
}

input[type="checkbox"]
{
    display:block;
}

JavaScript

$('input[type=checkbox]').on('click', function() {
    var isChecked = $(this).is(':checked');
    if (isChecked) {
        $(this).wrap('<div class="inputArea"></div>');
        $(this).closest('div').prepend('<textarea class="text-area" cols="10" rows="2"></textarea>');
    }
    else{
       $(this).closest('div').find('.text-area').remove();
        $(this).unwrap();
    }
});