JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.1.2.js"></script>
<script src="https://github.com/SteveSanderson/knockout.mapping/raw/master/build/output/knockout.mapping-latest.debug.js"></script>
<p>selected: <span data-bind="text: selectedTag"></span></p>
<hr/>
<form data-bind="template: 'tmpl1'"></form>

<script type="text/html" id="tmpl1">
{{each(i,v) tags}}
    <input type="radio" name="tagOption" value="${v.name}" data-bind="checked: selectedTag">
    <span class="email_name" data-bind="text: v.name"></span>
    <ul class="email_border">
        {{each emails}}
        <li class="email_value">${$value}</li>
        {{/each}}
    </ul>
{{/each}}
</script>

CSS

.email_button{
    position:relative; 
    left: 20px;
}
.email_list{
    overflow: scroll;
    width: 500px;
    height: 300px;
}

.email_border{
    margin: 20px;
    border-style:groove;
}
.email_name{
    margin: 10px;
}
.email_value{
    margin: 20px;
    
}

JavaScript

var rawdata = [
    {name: "A", value: "[email protected]"},
    {name: "B", value: "[email protected]"},
    {name: "C", value: "[email protected]"}
];

var process = function(emailTags) {
    var retval = {tags: [], selectedTag: ko.observable('')};
    $.each(emailTags, function(id, tag){
        retval.tags.push({name: tag.name, emails: tag.value.split(",")});
    });
    return retval;
};

var data = ko.mapping.fromJS(process(rawdata));

ko.applyBindings(data);