How to show multiple entries in multiple bootstrap cards?

Question

I want to show my tasks like this in bootstrap cards -

Picture for reference

Code that I'm using right now -

HTML

<div class="card" id="todo"></div>

AJAX

var  data = JSON.parse(httpRequest2.response);
  console.log(data);
  $.each(data, function(index, itemData) {
    $("#todo").append('<div class="row"><div class="col-9">'+
      itemData.Todo.task+
     '</div></div></div>'+
     '<div class="col-3"><p>'+
       Some Data
      </div>'
    );
  });

It is showing multiple to-do in one card. How can I show one to-do in one card?

Please help!

Answer 1

The problem is that you add all the todo in one card (div#todo). So what you need to do is just to make a div that will contains the card.

<div id="todos"></div>

const data = JSON.parse(httpRequest2.response);
  console.log(data);
  $.each(data, function(index, itemData) {
    $("#todos").append('<div class="card"><div class="row"><div class="col-9">'+
      itemData.Todo.task+
     '</div></div></div>'+
     '<div class="col-3"><p>'+
       Some Data
      </div></div>'
    );
  });

It should work as you want. And you can add css to improve style.