JSFiddle - React, Tailwind, and code Playground

by Kishore Sahasranaman

HTML

<select id="category"></select>
<select id="category1"></select>
<select id="category2"></select>
<select id="category3"></select>
<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

$.getJSON("https://api.myjson.com/bins/4ls7p", function (data) {
    //code inside
    var items = data;
    var checkIds = [];
    $.each(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(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="' + v.visitors + '">' + v.zone + '</option>');
                    $("#category3").html('<option value="' + v.id + '" data-price="' + v.visitors + '">' + v.date + '</option>');
                    tochange = true;
                }
                total += v.visitors;
            }
        });
        $('#dept-input').val(dept_number);
        $('#price-input').val(total);
    }).change();

    $("select[id^='category']:not(#category)").on('change', function () {
        var dept_number = parseInt($(this).val());
        var price = $(this).find(':selected').data('price');
        $('#dept-input').val(dept_number);
       ...