JSFiddle - React, Tailwind, and code Playground

by Taleeb Anwar

HTML

<table id="tbl_result" border="0" cellpadding="0" cellspacing="0" width="380"></table>

CSS

input.offer + label {
    display:inline-block;
    margin:-2px;
    padding: 15px 12px;
    margin-bottom: 0;
    line-height: 20px;
    width: 175px;
    color: #333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-bottom-color: #b3b3b3;
}
input.offer:hover + label:hover {
    background-color: #f8ad51;
}

JavaScript

var final_list = final_list + '<tr><td>';
var data = {
    id: 1,
    cmp: 'cmp',
    besked: 'besked',
    price: 10
};


final_list += '<input type="radio" id="offer' + data.id + '" name="offer" value="' + data.id + '" class="offer" onClick="this.form.submit1.disabled = !this.checked;">';
final_list += '<label for="offer' + data.id + '">' + data.cmp + '<br><font size="1">' + data.besked + '</font><br><font size="4">' + data.price + ' kr.' + '</font></label>';
final_list += '</td></tr>';

//var finalList_count = finalList_count + 1


$("#tbl_result").html(final_list);
$("#tbl_result").show();