JSFiddle - React, Tailwind, and code Playground

HTML

<div id="form">
    <label for="days">Number of days:</label>
    <input type="text" id="days" placeholder="Enter number of days" value="3" />
    <label for="txt">City:</label>
    <input type="text" id="location" placeholder="Enter location" value="New York" />
    <input type="button" value="Fetch data" id="btn" />
</div>

<table id="weatherTable">
    <tr id="date">
        <td>Date</td>
    </tr>
    <tr id="temp-max-c">
        <td>tempMaxC</td>
    </tr>
    <tr id="temp-min-c">
        <td>tempMinC</td>
    </tr>
    <tr id="temp-max-f">
        <td>tempMaxF</td>
    </tr>
    <tr id="temp-min-f">
        <td>tempMinF</td>
    </tr>
</table>

CSS

td {
    border: 1px solid #444;
    padding: 5px;
}

#date {
    background-color: #777;
    color: #eee;
}

#form {
    margin: 10px 0;
}

JavaScript

(function() {
    var location$ = $('#location'),
        days$ = $('#days'),
        prop2el = {
        'date': getEl('date'),
        'tempMaxC': getEl('temp-max-c'),
        'tempMinC': getEl('temp-min-c'),
        'tempMaxF': getEl('temp-max-f'),
        'tempMinF': getEl('temp-min-f')
    };

    function getEl(id) {
        return document.getElementById(id);
    }
    
    function createCell(html) {
        var cell = document.createElement('td');
        cell.innerHTML = html;
        cell.className = 'response-data';
        return cell;
    }
    
    function addCell(row, cellHtml) {
        row.appendChild(createCell(cellHtml));
    }
    
    function addDateInfo(dateWeather) {
        for(var prop in prop2el) {
            addCell(prop2el[prop], dateWeather[prop]);
        }
    }

    function onWeatherDataReceived(response) {
        $('td.response-data').remove();
        for(var i = 0, l = response.data.weather.length; i < l; i++) {
            addDateInfo(response.data.weather[i]);
        }
    }
    
    function fetchWeather() {
        var city = location$.val(),
            days = parseInt(days$.val());
        if(!city.length) {
            return;
        }
        if(!days || days > 5) {
            days = 5;
            days$.val(days);
        }
        $.getJSON('http://free.worldweatheronline.com/feed/weather.ashx?callback=?', {
            //?q=ahmedabad%2cgujarat,india&format=json&num_of_days=2&key=14f868e45b161020121809'
            q: encodeURIComponent(city),
            format: 'json',
            num_of_days: days,
            key: '14f868e45b161020121809'
        })
        .success(onWeatherDataReceived);
    }
    
    $(document).on('click', '#btn', fetchWeather);
    alert("test");
    fetchWeather();
});