Tengo una página que consume la API de Wikipedia para obtener artículos relacionados con lo que sea que el usuario coloque en un cuadro de texto, todo esto lo realiza perfecto, el problema esta en que solo estoy mostrando el último artículo encontrado debido a voy reemplazando el contenido en el mismo div.
Debería crear diversos divs dinámicamente dependiendo de cuantos artículos encuentre, el problema es que donde almaceno el contenido de los artículos son muchos divs dentro de otros, para darle el estilo que quiero y no logro crearlos con los métodos append, prepend, appendTo, etc.
BODY
<h1 class="text-light text-center">Wikisearch</h1>
<div class="container">
<div class="row top-space">
<div class="col-lg-6">
<div class="input-group">
<input id="txt-box" type="text" class="form-control" placeholder="Search for..." aria-label="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button" id="search">Search!</button>
</span>
</div>
</div>
<div class="col">
<a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank" class="text-light">See a random article</a>
</div>
<div class="container top-space" id="contenedor">
<div class="card text-white bg-danger mb-3" style="max-width: 50rem;">
<div class="card-header">Result of search</div>
<div class="card-body">
<h4 class="card-title" id="wiki_title"></h4>
<p class="card-text" id="wiki_content"></p>
</div>
</div>
</div>
</div>
</div>
JS
$(document).ready(function() {
$('#search').click(function () {
var txt = $('#txt-box').val();
var title = convert_case(txt);
$.ajax({
url: "https://en.wikipedia.org/w/api.php?action=query&prop=extracts&list=search&continue=&srsearch="+title+"&format=json",
dataType: 'jsonp',
type: 'POST',
headers: { 'Api-User-Agent': 'Example/1.0' },
}).done(update).fail(handleErr);
});
});
function update(response) {
console.log(response);
$.each(response.query.search, function(i, item) {
// Trato de crear nuevos divs con clases similares a las del html original
var topCard = $('<div></div>').addClass("card text-white bg-danger mb-3");
var cardHeader = $('<div></div>').addClass("card-header top-space").appendTo($(topCard));
var cardBody = $('<div></div>').addClass("card-body");
var h4Title = $('<h4 id="wiki_title"></h4>').addClass("card-title").html(item.title);
var pContent = $('<p id="wiki_content"></p>').addClass("card-text").html(item.snippet);
$('#contenedor').prepend($(cardHeader));
$('#wiki_title').html(item.title);
if (item.snippet == undefined || item.snippet == "") {
$('#wiki_content').html("Not information");
}
else {
$('#wiki_content').html(item.snippet);
}
});
}
function handleErr(jqxhr, textStatus, err) {
console.log("Request Failed: " + textStatus + ", " + err);
}
function convert_case(str) {
var lower = str.toLowerCase();
return lower.replace(/(^| )(\w)/g, function(x) {
return x.toUpperCase();
});
}
Intente añadirlos uno por uno pero no logro que queden bien, con appendTo casi lo logro pero se repetía mucho el contenido.