How I can create multiple DIVs with ’append’ in jQuery?

Question

I want to loop multiple DIV elements.

There are 5 books. I want to loop 5 books in ID: BootLoop .

What I tried?

my_orders.append(data[i].order.bname).appendTo("#bookLoop > div > div > div > h3");

my_orders.append(data[i].order.blink).appendTo("#bookLoop > div > div > div > a");

It didn't work. Where am I making a mistake?

JS:

var my_orders = $("#bookLoop"); 
$.each(data, function(i, order) {
     $("#bookName").append(data[i].order.bname);,
     $("#bookURL").append(data[i].order.blink);
});

HTML (Code structure that should be loop):

<div id="bookLoop">
   <div class="col-3">
      <div class="block-content">
        <div class="d-md-flex">
            <h3 id="bookName" class="h4 font-w700"></h3>
        <div>
        <div class="d-md-flex link">
           <a href="#" id="bookURL">Details</a>
        <div>
      <div>
   <div>
<div>

JSON:

[
   {"order":{"id":"61","bname":"Book 1","blink":984}},
   {"order":{"id":"42","bname":"Book 2","blink":5414}},
   {"order":{"id":"185","bname":"Book 3","blink":4521}},
   {"order":{"id":"62","bname":"Book 4","blink":41254}},
   {"order":{"id":"15","bname":"Book 5","blink":7464}}
]

Answer 1

I think that what you want is to append each book and link inside #bookLoop , beign each book and link with it's own content.

Below I'm creating elements (nodes) to each book you have then appending it to my_orders .

Take a look if it is what you want, if not, please edit your question showing an example of the desired rendered HTML

 var my_orders = $("#bookLoop"); var books = '' var links = '' let data = [ {"order":{"id":"61","bname":"Book 1","blink":984}}, {"order":{"id":"42","bname":"Book 2","blink":5414}}, {"order":{"id":"185","bname":"Book 3","blink":4521}}, {"order":{"id":"62","bname":"Book 4","blink":41254}}, {"order":{"id":"15","bname":"Book 5","blink":7464}} ] $.each(data, function(i, order) { let col = document.createElement('div') col.className = 'col-3' let content = document.createElement('div') content.className = 'block-content' let flexC = document.createElement('div') flexC.className = 'd-md-flex' let title = document.createElement('h3') title.className = 'h4 font-w700' title.textContent = data[i].order.bname; flexC.append(title) let flexL = document.createElement('div') flexL.className = 'd-md-flex link' let details = document.createElement('a') details.className = 'bookURL' details.href = "#" details.textContent = "Details: " + data[i].order.blink flexL.append(details) my_orders.append(col) col.append(content) content.append(flexC) content.append(flexL) }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="bookLoop"> <div>