JSFiddle - React, Tailwind, and code Playground

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 />');

    var rdo;

    try {
        rdo = $('<input type="radio" name="fldID" />');
        console.log(rdo)
    } catch (err) {
        console.log(err)
        rdo = $('<input />');
    }
    rdo.setAttribute('type', 'radio');
    rdo.setAttribute('name', 'fldID');

    li.append(rdo);
    
    $('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);
});