JSFiddle - React, Tailwind, and code Playground

by David Marshall

HTML

<div id="checked"></div>
<input type="checkbox" name="color[]" id="color_white" value="white">White
<input type="checkbox" name="color[]" id="color_blue" value="blue" checked="checked">Blue
<input type="checkbox" name="color[]" id="color_red" value="red" checked="checked">Red
<input type="checkbox" name="color[]" id="color_orange" value="orange">Orange
<input type="checkbox" name="color[]" id="color_purple" value="purple">Purple
<input type="checkbox" name="color[]" id="color_black" value="black" checked="checked">Black

JavaScript

$(function(){
    $('input[type=checkbox]').each(function(){
        if($(this).attr('checked')=='checked'){
            $('#checked').append('<input id="'+$(this).attr('id').substring(6)+'" type="button" value="'+$(this).attr('id')+'">')
        }
    }); 
    $('input').on('click',function(){
        var i='color_'+$(this).attr('id');
        $('#'+i).prop('checked','');
        $(this).remove();
    });
});