JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://eprogramers.com/custom_form.js"></script>
<ul id="radio">
    <li>    
        <input type="radio" value="radio" class="styled" name="test" checked />
        <label class="radioButton">Radio button</label>
    </li>       
    <li>    
        <input type="radio" value="radio1" class="styled" name="test"/>
        <label class="radioButton">Radio button</label>
    </li>  
</ul>

<button class="clear">Add radio </button>

CSS

ul,li{
    margin:0;
    padding:0;
}
ul{
list-item-style:none;
}
li, .clear{
    display:block;
    clear:both;
}
input.styled {
    display: none;
}

label.radioButton{
    clear: none;
    float: left;
    font-weight: normal;
    line-height: 30px;
    width: auto;
    color: #666;
    background:none;
    margin:0
}

label.radioButton {
    height: 25px;
}

.radio {
    width: 30px;
    height: 30px;
    padding: 0 5px 0 0;
    display: block;
    clear: left;
    float: left;
    margin-left: 90px;
    background: url(http://eprogramers.com/radio.png) no-repeat;
    margin-bottom: 0;
    height: 25px;
}

JavaScript

function uniqid() {
    var newDate = new Date;
    return newDate.getTime();
}

var item = '<li><span class="radio" style="background-position: 0pt 0pt;"></span><input type="radio" value="'+uniqid()+'" class="styled" name="test"/><label class="radioButton">Radio button</label></li>';


$('button').live('click', function() {
    $(item).appendTo('#radio');
})