JSFiddle - React, Tailwind, and code Playground
HTML
<div class="wrapper">
</div>
CSS
.wrapper{
width:100px;
border:1px solid red;
margin:0 auto;
}
.city{
text-align:center;
border-bottom:1px solid silver;
}
.jumlah{
text-align:center;
}
JavaScript
$(function(){
var $content = $(".wrapper");
$.ajax({
url : "//htlsearch.pegipegi.com/HotelSearchAPI/v1/autocomplete/",
// url : "http://api.pegipegi.com/v2/getBanner",
type : "GET",
dataType : "json",
success : function(data){
$.each(data.city, function(i, data) {
$content.append("<div class='city-jumlah' data-kota='" + data.city + "'><div class='city' value='"+ data.url +"'><b>"+ data.city +"</b></div><div class='jumlah'>"+ data.count +" <i>Hotel Terdaftar</i></div></div>");
});
$('.city-jumlah').click(function(e) {
alert($(this).data('kota'));
});
},
error:function(){
alert('error');
}
});
});