JSFiddle - React, Tailwind, and code Playground

HTML

<select id="category"></select>
<select id="category1"></select>
<select id="category2"></select>
<select id="category3"></select>
<br>
<br>
<div class="row">
    <div class="col-sm-2 " id="services_block" style="width: 230px;height: 100px; background-color: orange;color: white; line-height: 30px; text-align: center; font-size: 100%;  font-weight: bold; border-left:3px solid white;
   border-right:3px solid white;" >
    Visitors 
    <br> CURRENT DAY
<br>
        <span id="totalVisitorsCurrentDay" style="color: black; font-size: 150%;  font-weight: bold;" > </span>
    </div>
<br>


    <div class="col-sm-2" id="services_block" style="width: 180px;height: 100px;  background-color: red;color: white;line-height: 30px; text-align: center; font-size: 100%;  font-weight: bold; border-left:3px solid white;
   border-right:3px solid white;">Visitors 
    <br> PAST DAY
    <br>
        <span id="totalVisitorsPastDay" style="color: black; font-size: 150%;  font-weight: bold;"></span>
        </div>
<br>

    <div class="col-sm-2" id="services_block" style="width: 180px;height: 100px;  background-color: red;color: white;line-height: 30px; text-align: center; font-size: 100%;  font-weight: bold; border-left:3px solid white;
   border-right:3px solid white;">Visitors 
    <br> PAST WEEK
    <br>
        <span id="totalVisitorsPastWeek" style="color: black; font-size: 150%;  font-weight: bold;"></span>
        </div>



        
  </div>
<br>

JavaScript

$.getJSON("https://api.myjson.com/bins/2soxd", 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;
        var totalVisCurrDay= 0;
        var totalVisPasDay= 0;
        var totalVisPasWeek= 0;
        $.each(items, function (k, v) {
            if (v.id == dept_number) {
                if (tochange == true) {
                    $("#category1").append('<option value="' + v.id + '" data-visitorscurrday="' + v.visitorscurrday + '" data-visitorspastday="' + v.visitorspastday + '" data-visitorspastweek="' + v.visitorspastweek + '" data-price="' + v.visitors + '">' + v.site + '</option>');
                    $("#category2").append('<option value="' + v.id + '" data-visitorscurrday="' + v.visitorscurrday + '" data-visitorspastday="' + v.visitorspastday + '" data-visitorspastweek="' + v.visitorspastweek + '" data-price="' + v.visitors + '">' + v.zone + '</option>');
                    $("#category3").append('<option value="' + v.id + '" data-visitorscurrday="' + v.visitorscurrday + '" data-visitorspastday="' + v.visitorspastday + '" data-visitorspastweek="' + v.visitorspastweek + '" data-price="' + v.visitors + '">' + v.date + '</option>');
                } else {
                    $("#category1").html('<option value="' + v.id + '" data-visitorscurrday="' + v.visitorscurrday + '" data-visitorspastday="' + v.visitorspastday + '" data-visitorspastweek="' + v.visitorspastweek + '" data-price="' + v.visitors + '">' + v.site + '</option>');
                   ...