Я пытаюсь настроить свой код таким образом, чтобы каждый раз, когда я искал новый город, запускался новый
, чтобы сохранить список организованным. Я попытался добавить закрывающий тег, и br безуспешно.
Если кто-нибудь может сообщить мне, где я иду не так, я был бы признателен.
Я также добавил свой код в кодовое поле, если это проще: https://codepen.io/rob-connolly/pen/YzXPjjz
Вот изображение проблемы: 
$(document).ready(function() {
let searchHistory = [];
$('#submitWeather').click(function(e) {
e.preventDefault();
var city = $('#city').val();
searchHistory.push(city);
$("#history").html('<li>' + searchHistory + '<br></li>')
if (city != '') {
//---------AJAX------------
$.ajax({
url: 'https://api.openweathermap.org/data/2.5/forecast?appid=34fd31758b449ea433e05058c225793c&q=' + city + "&units=imperial&count=10",
type: "GET",
dataType: "jsonp",
success: function(data) {
var widget = show(data);
console.log("here");
$("#show").html(widget);
//----------- Forecast Widget ------------
var widget2 = '';
for (var i in data.list) {
if (i > 0 && data.list[i].dt_txt.indexOf("12:00") > -1) {
console.log(data.list[i].dt_txt);
var code = [
'<div class="col-2 day">',
'<p>',
data.list[i].dt_txt.split(' ')[0],
'</p>',
//weather icon
'<img src="http://openweathermap.org/img/wn/' + data.list[i].weather[0].icon + '@2x.png">',
'<p> Temp:',
data.list[i].main.temp,
' degrees</p>',
'<p> Humidity: ',
data.list[i].main.humidity,
'%</p>',
'<p> Wind speed: ',
data.list[i].wind.speed,
' MPH</p>',
'</div>'
];
widget2 += code.join('');
}
}
$(".5day").html(widget2);
$("#city").val('');
}
});
} else {
$("#error").html('Field cannot be empty');
}
});
});
function show(data) {
console.log("show: ", data);
// return of today's weather
return '<h3>' + data.city.name + ' (' + data.list[0].dt_txt.split(' ')[0] + ') </h3>' +
'<p><strong>Temp: </strong>' + data.list[0].main.temp + ' degrees</p>' +
'<p><strong>Humidity: </strong>' + data.list[0].main.humidity + ' %</p>' +
'<p><strong>Wind Speed: </strong>' + data.list[0].wind.speed + ' MPH</p>';
//second function looking for forcast data for day 1 ^^
}
body {
background-color: rgb(213, 213, 213);
}
.day1,
.day2,
.day3,
.day4,
.day5,
.day {
width: 220px;
height: 200px;
background-color: #71b4e4;
position: relative;
color: rgb(45, 45, 45);
display: inline-table;
border-style: solid;
border-color: white;
}
.bgMain {
margin-top: 1%;
background: rgb(173, 201, 221);
background: linear-gradient(90deg, rgba(173, 201, 221, 1) 0%, rgba(154, 202, 236, 1) 46%, rgba(113, 180, 228, 1) 79%, rgba(31, 124, 150, 1) 100%, rgba(0, 12, 14, 1) 100%);
color: rgb(45, 45, 45);
border: solid 2px white;
}
.input {
text-align: center;
}
input[type='text'] {
height: 50px;
width: 200px;
background: #e7e7e7;
}
input[type='submit'] {
height: 50px;
width: 100px;
background: blue;
}
.forecastBox {
border-style: solid;
border-color: #e7e7e7;
border-width: 10px;
}
#searchForm1 {
right: 30%;
}
#city {
left: 190%;
}
#submitWeather {
left: 190%;
}
@media (max-width: 800px) {
.reser {
font-size: 14px
}
#history {
font-size: 14px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Weather Dashboard</title>
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand" href="#">Weather App</a>
<div class=" navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto"></ul>
<!-- this is the form for the weather search-->
<form class="weatherSearch form-inline my-2 my-sm-0">
<input class="form-control mr-sm-2" id="city" type="search" placeholder="Search City" aria-label="Search">
<button id="submitWeather" class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div id="recentCity" class='col-2'>
<h4 class="reser">Recent Searches:</h4>
<div class="row"></div>
<div class="cityPast" id="cityList"></div>
</div>
<div class='col-10'>
<!-- Thi is the div id = show to display the weather data. -->
<div class="bgMain" id="show">
</div>
</div>
</div>
<div class='container-fluid'>
<div class=row>
</div>
<div class='col-2'></div>
</div>
<div class='col-8'>
</div>
<div class='row'>
</div>
<div id="5dayforcast" class='row'>
<div id="history" class="col-2">
</div>
<div class="col-10">
<h4>5 Day Forecast</h4>
<div class="row">
<div class="col-12 5day">
</div>
</div>
</div>
<div class="row"></div>
<div class="col-2"></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>