JSFiddle - React, Tailwind, and code Playground

by Jimmy Sawczuk

HTML

<form method="post" action="">
    <ul class="responses"></ul>
</form>
        
<h1 id="sum"></h1>

<div id="console"></div>

CSS

h1 { font-size: 24px; margin-top: 24px; }

li { padding: 5px; margin: 10px; background-color: #e9e9e9; }

console { font-family: sans-serif; }

JavaScript

for (var i = 1; i <= 4; i++) {
var li = $('<li />')
    .append($('<input />', { 'type': 'radio', 'id': 'chk_' + i, 'name': 'test'})
            .val(i)
            .prop("defaultChecked", false)
    )
    .append("This is " + i);

$('ul.responses').append(li);    
}

$('ul.responses li').click(function(evt) {
    var tagName = evt.srcElement? evt.srcElement.tagName : false;
    var $input = $(this).find('input');
    
    if (tagName == "LI")
    {
        console.log("Trying to fire click");
        console.log($input);
        $input.click();
    }
    
    return true;
});

$('ul.responses li input').change(function(evt) {
    var sum = 0;
    
    console.log("Got to change", evt);
    
    $('input').each(function(idx, elem) {
        if ($(elem).prop('checked'))
        {
            sum += parseInt($(elem).val());
        }
        else
        {
            console.log(elem, elem.checked);
        }
    });
    
    $('#sum').html(sum);
});