JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form-item type-radio name-lista">
    <div class="radio-list">
        <div class="option-group">
            <input type="radio" name="lista" value="--default--" checked="checked"> <span class="option-label">Alpha</span>

        </div>
        <div class="option-group">
            <input type="radio" name="lista" value="14691"> <span class="option-label">Beta</span>

        </div>
        <div class="option-group">
            <input type="radio" name="lista" value="370"> <span class="option-label">Gamma</span>

        </div>
        <div class="option-group">
            <input type="radio" name="lista" value="9214"> <span class="option-label">Delta</span>

        </div>
        <div class="option-group">
            <input type="radio" name="lista" value="9215"> <span class="option-label">Epsilon</span>

        </div>
        <div class="option-group">
            <input type="radio" name="lista" value="9216"> <span class="option-label">Zeta</span>

        </div>
        <div class="option-group">
            <input type="radio" name="lista" value="9217"> <span class="option-label">Eta</span>

        </div>
        <div class="option-group">
            <input type="radio" name="lista" value="9213"> <span class="option-label">Theta</span>

        </div>
        <div class="option-group">
            <input type="radio" name="lista" value="9211"> <span class="option-label">Iota</span>

        </div>
        <div class="option-group">
            <input type="radio" name="lista" value="9210"> <span class="option-label">Kappa</span>

        </div>
        <div class="option-group">
            <input type="radio" name="lista" value="9204"> <span class="option-label">Lambda</span>

        </div>
        <div class="option-group">
            <input type="radio" name="lista" value="9206"> <span class="option-label">Mu</span>

        </div>
        <div class="option-group">
            <input type="radio" name="lista" value="9207"> <span...

CSS

body {
    background-color: grey;
}
.form-item {
    float: left;
    width: 100px;
    height: 100px;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: white;
    border-radius: 5px;
}
.name-listb, .name-listc {
    margin-left: 10px;
}

JavaScript

$(document).ready(function () {
    $('.name-lista input').click(function () {

        var lista_id = $(this).val();
        var $listb = $('.name-listb .checkbox-list');
        var $listc = $('.name-listc .checkbox-list');

        $listb.find('input').prop('checked', false);
        $listc.empty();

        // Ajax pull to populate listc with lista values.
    });

    $('.name-listb input').add('.name-listc input').click(function (e) {
        var lista_id = $('.name-lista input:checked').val();
        var listb_id = $(this).val();
        var operation = $(this).prop('checked') ? 'create' : 'delete';
        var $listb = $('.name-listb .checkbox-list');
        var $listc = $('.name-listc .checkbox-list');

        if (operation == 'create') {
            $listb.find('input[value=' + listb_id + ']').prop('checked', true);
            // Ajax request to add checked item.
            $new_item = $listb.find('input[value=' + listb_id + ']').parents('.option-group').clone();
            $listc.append($new_item);
        } else if (operation == 'delete') {
            $listb.find('input[value=' + listb_id + ']').prop('checked', false);
            // Ajax request to remove checked item.
            $listc.find('input[value=' + listb_id + ']').parents('.option-group').remove();
        }
    });
});