I am currently using the Flickr API to fetch images and display them on my website. The issue I am facing is that after displaying all the photos of each album, there needs to be a line break so that the name of the next album is displayed on the next line. However, at the moment, the name of the next album is being shown right after the last photo of the previous album. I have tried inserting a line break tag in various places but it has not resolved the problem. Any assistance would be greatly appreciated. I have also included an image of how the page currently appears.
<html>
<body height="200" width="345">
<h2><div class="img-container" id="flickr"></div></h2>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var settings = {
"async": true,
"crossDomain": true,
"url": "https://www.flickr.com/services/rest/?method=flickr.photosets.getList&api_key=d4484e060a112d188a27a51ea64f427e&user_id=13796773%40N04&format=json&nojsoncallback=1",
"method": "GET",
}
const flickr = $("#flickr"); // the wrapping div, where all albums divs will be appended
$.ajax(settings).done(function(data) {
$.each(data.photosets.photoset, function(i, gp) {
const div = $("<div/>"); // a div for each album
flickr.append(div);
const albumname = $("<h2/>"); // headline for the album
albumname.text(gp.title._content + " Gallery");
div.append(albumname);
var id = gp.id;
var settings1 = {
"async": true,
"crossDomain": true,
"url": "https://www.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=d4484e060a112d188a27a51ea64f427e&photoset_id=" + id + "&user_id=13796773%40N04&format=json&nojsoncallback=1",
"method": "GET",
}
$.ajax(settings1).done(function(data) {
$.each(data.photoset.photo, function(i, gpr) {
var farmId = gpr.farm;
var serverId = gpr.server;
var id = gpr.id;
var secret = gpr.secret;
div.append('<center><a href="https://farm' + farmId + '.staticflickr.com/' + serverId + '/' + id + '_' + secret + '.jpg" target="_blank"><img style="border:1px solid #000000" src="https://farm' + farmId + '.staticflickr.com/' + serverId + '/' + id + '_' + secret + '.jpg"/></a></center>'); // append images to album div
});
});
});
});
</script>
</body>
</html>
<style>
img {max-height:125px; margin:3px; float: left; border:1px solid #dedede;}
</style>