JSFiddle - React, Tailwind, and code Playground

by mkdizajn

HTML

<select id="category"></select>
<select id="category1"></select>
<select id="category2"></select>
<select id="category3"></select>

<h1></h1>
<br><br>
<label>Dept. num:</label>
<input type="text" id="dept-input"></input>
<br><br>
<label>Price:</label>
<input type="text" id="price-input"></input>

JavaScript

var items = '[{"chains": "Asia","visitors": 10,"id": 1,"site":"Singapore", "zone":"Main Entrance", "date":"Oct. 11, 2015"},{"chains": "Asia","visitors": 20,"id": 1, "site":"kuala lumpur", "zone":"Side Entrance", "date":"Oct. 12, 2015"},{"chains": "North America","visitors": 30,"id": 2,"site":"Texas", "zone":"Main Entrance", "date":"Oct. 15, 2015"},{"chains": "North America","visitors": 30,"id": 2,"site":"Florida", "zone":"Main Entrance", "date":"Oct. 15, 2015"},{"chains": "UAE","visitors": 70,"id": 3,"site":"Dubai", "zone":"Main Entrance", "date":"Oct. 15, 2015"},{"chains": "UAE","visitors": 100,"id": 3,"site":"Dubai Mall", "zone":"Main Entrance", "date":"Oct. 15, 2015"}]';

$.ajax({
    url: "http://mkdizajn.github.io/public/test.json",
    success: function(data){
        $( 'h1' ).text( data[0].name )
    },
});

var checkIds = [];
$.each(JSON.parse(items), function (k, v) {
    if($.inArray(v.id,checkIds) == -1){
    $("#category").append('<option value="' + v.id + '" data-price="' + v.visitors + '">' + v.chains + '</option>');
       checkIds.push(v.id);
    }
});



$("#category").on('change',function () {
    var dept_number = parseInt($(this).val());
    var price = $(this).find(':selected').data('price');
    var tochange = false;
    var total = 0;
    $.each(JSON.parse(items), function (k, v) {
    	if(v.id == dept_number){
            if(tochange == true){
            $("#category1").append('<option value="' + v.id + '" data-price="' + v.visitors + '">' + v.site + '</option>');
            $("#category2").append('<option value="' + v.id + '" data-price="' + v.visitors + '">' + v.zone + '</option>');
            $("#category3").append('<option value="' + v.id + '" data-price="' + v.visitors + '">' + v.date + '</option>');    
            }else{
               $("#category1").html('<option value="' + v.id + '" data-price="' + v.visitors + '">' + v.site + '</option>');
                $("#category2").html('<option value="' + v.id + '" data-price="' +...