JSFiddle - React, Tailwind, and code Playground

by ko echos

HTML

<button>append</button>
<div id='list'>
    <span>
        <div class="RadioCheckbox">
            <div class="para" style="width:20px;margin:0 auto">
                <p><input type="checkbox" /><label for=""></label></p>
            </div>
        </div>
    </span>
    
</div>

CSS

button { width:100px; height : 30px;}

.RadioCheckbox form { padding:20px 25px 5px 25px; }
.RadioCheckbox fieldset { margin-bottom:15px; }
.RadioCheckbox legend { padding-bottom:15px; font-weight:bold; font-size:17px; color:#3b5998; }

.RadioCheckbox p { position:relative; float:left }
.RadioCheckbox p label { color:#5e696d; }

.RadioCheckbox p>input[type="checkbox"], .RadioCheckbox p>input[type="radio"] { position:relative; top:-1px; vertical-align:middle; }

.RadioCheckbox p:not(#cssbrowser)>input[type="checkbox"], .RadioCheckbox p:not(#cssbrowser)>input[type="radio"] { position:absolute; left:0; top:0; width:20px; height:20px; margin:0; opacity:0; }
.RadioCheckbox p:not(#cssbrowser)>input[type="checkbox"] + label, .RadioCheckbox p:not(#cssbrowser)>input[type="radio"] + label {
	margin:0 0 0 0; padding:4px 0 2px 25px; display:inline-block; background:url(/images/common/radiocheckbox.png) no-repeat left top;
	width:100%; height:22px; display:block; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
}
.RadioCheckbox p:not(#cssbrowser)>input[type="radio"] + label { background-position:left -100px; }

.RadioCheckbox p:not(#cssbrowser)>input[type="checkbox"]:disabled + label { background-position:left -25px; }
.RadioCheckbox p:not(#cssbrowser)>input[type="checkbox"]:checked + label { background-position:left -50px; }
.RadioCheckbox p:not(#cssbrowser)>input[type="checkbox"]:checked:disabled + label { background-position:left -75px; }

.RadioCheckbox p:not(#cssbrowser)>input[type="radio"]:disabled + label { background-position:left -125px; }
.RadioCheckbox p:not(#cssbrowser)>input[type="radio"]:checked + label { background-position:left -150px; }
.RadioCheckbox p:not(#cssbrowser)>input[type="radio"]:checked:disabled + label { background-position:left -175px; }

/*.RadioCheckbox p:not(#cssbrowser)>input[type="checkbox"]:focus + label, .RadioCheckbox p:not(#cssbrowser)>input[type="radio"]:focus + label {
	-webkit-box-shadow:inset 0 1px 3px...

JavaScript

$(function(){
    $('button').click(function(){        
        create_rows();
    });
    
    function create_rows(){
        $('#list').append('<span>'
        +'<div class="RadioCheckbox">'
         +'   <div class="para" style="width:20px;margin:0 auto">'
         +'       <p><input type="checkbox" /><label for=""></label></p>'
            +'</div>'
        +'</div>'
    +'</span>');
    }
});