JSFiddle - React, Tailwind, and code Playground

by sutherland

HTML

<button>Click</button>
<span id="total"></span>

JavaScript

var data = [
    {
    "name": "cms",
    "question": "Need a CMS?",
    "options": [
        {
        "text": "WordPress",
        "cost": 500},
    {
        "text": "Static",
        "cost": 650}
    ]},
{
    "name": "logo",
    "question": "Need a logo?",
    "options": [
        {
        "text": "Yep!",
        "cost": 500},
    {
        "text": "Nope!",
        "cost": 225}
    ]},
{
    "name": "additional",
    "question": "Additional?",
    "options": [
        {
        "text": "Some",
        "cost": 300},
    {
        "text": "None",
        "cost": 0}
    ]}
];

var questions = $('<ul id="questions"><ul>');
var total = $('#total');

for (i = 0; i <= data.length - 1; i++) {
    item = data[i];
    var question = $('<li></li>').append('<h2>' + item.question + '</h2>');
    $.each(item.options, function(key, val) {
        question.append('<input type="radio" name="' + item.name + '" value="' + val.cost + '">' + val.text + '</input>');
    });
    questions.append(question);
}
$('body').append(questions);

$('input').on('change', function() {
    var price = 0;
    $.each($('input[type="radio"]:checked'), function(key, val) {
        price += parseInt($(val).val());
    });
    total.text('$'+price);
});