JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <h3>Choose a Season:</h3>
    <form action="">
    <select name="season" id="">
        <option value="winter">Winter</option>
        <option value="spring">Spring</option>
        <option value="summer">Summer</option>
        <option value="fall">Fall</option>
    </select>

    <h3>What's the weather like?</h3>
    <select name="weather" id="">
        <option value="sunny">sunny</option>
        <option value="windy">windy</option>
        <option value="cold">cold</option>
        <option value="cloudy">cloudy</option>
    </select>
        <input type="submit" value="submit">
    </form>
    
    <h3>Response:</h3>
    <div class="response"></div>
</div>

CSS

.wrapper {
    background-color: #ff9900;
    padding: 20px;
    height: 100vh;
}
h3 {
    text-decoration: underline;
    margin: 30px 0 10px;
}

h3:first-child { margin-top: 0; }

.response {
    font-family: Arial, Sans-Serif;
    background-color: rgba(100, 200, 255, 1);
    padding: 20px;
    border: 2px solid rgba(255, 50, 0, 0.3);
    border-radius: 12px;
    color: black;
    line-height: 1.4;
}

select {
    width: 200px
}

input {
    display: block;
    margin-top: 20px;
    width: 200px;
    height: 40px;
    background-color: hotpink;
    border-radius: 4px;
    margin-top: 30px;
}

JavaScript

$(function () {
    // Need to improve my skills with data handling and arrays.
    // Am I way off base with the structure I've built?
    var attire = {
        winter: ['sweater', 'hat', 'boots', 'coat'],
        spring: [],
        summer: ['swimwear', 'flipflops', 'towel', 'shorts', 'shades'],
        fall: []
    };
    
    var weather = ["sunny", "windy", "cold", "cloudy"];
    
    var locations = ["mountains", "beach", "desert"];
    
	// The idea would be that these two variable could change. 
    var currentWeather = weather[3];
    var currentLocation = locations[1];

    // Built the appropriate list of attire according to weather and location.
    function yourAttire() {
        
        if (currentWeather && currentLocation) {
            return [
                	attire.winter[0],
                   	attire.summer[1],
                   	attire.summer[3]
            		];
        }
    }
    
    var sentence = 'Youre attire will be '
    $('.response').append(
        "<div>" +
        "You're attire will be: <b>" +
        yourAttire().join(", ") +
        ".</b></div>"
    );
    
    // I've gotta learn somehow, homies. Thanks!
});