JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<div id="settings"></div>

CSS

.setting_item
{
    display:block;
    width:50%;
    border:solid 1px black;
    margin:2px;
    text-align:center;
}

JavaScript

var apisettings = {
        "timeshift": {
            "value": "0",
            "list": [
                "0",
                "10",
                "13"
            ]
        },
        "timezone": {
            "value": "0"
        },
        "stream_server": {
            "value": "64.237.62.28",
            "list": {
                "1": {
                    "ip": "64.237.62.28",
                    "descr": "USA 1"
                }
            }
        },
        "http_caching": {
            "value": 500,
            "list": [
                500,
                1500,
                3000,
                5000
            ]
        },
        "bitrate": {
            "value": 1500,
            "list": [
                320,
                900,
                1500,
                2500
            ],
            "names": [
                {
                    "val": 320,
                    "title": "Mobile"
                },
                {
                    "val": 900,
                    "title": "Eko"
                },
                {
                    "val": 1500,
                    "title": "Standard"
                },
                {
                    "val": 2500,
                    "title": "Premium"
                }
            ]
        }
};

var Settings = {
    me : null,
    settings : null,
    init : function( id, settings )
    {
        this.me = $( "#" + id );
        this.settings = settings;
        
        var elements = "";
        for( var item in settings )
        {
            var val = settings[item].value;
            if("undefined" != settings[item].names )
            {
                for( var idx in settings[item].names )
                {
                    if( val == settings[item].names[idx].val )
                    {
                        val = settings[item].names[idx].title;
                        break;
                    }
                }
            }
            elements += '<div...