Error organizing items brought from a database through javascript

I'm doing a to-do-list with the help of ajax, I have two columns one of pending tasks and one of completed tasks , in my database I have a field called completed which has possible values of 0 if it is not completed or 1 if the task is complete. In my ajax.js file with the help of an if I try to place the tasks that are in my database in their corresponding columns. but there comes the problem since the pending tasks are somehow also placed in the column of completed tasks , the code is as follows:

 function getData() {
   $.ajax({
      url: 'libs/get-tasks.php',
      type: 'GET',
      success: (response) => {
         let data = JSON.parse(response);
            let template = '';
            data.forEach(task => {
               template += '
               <div class="card">
                  <h2>${task.name}</h2>
                  <p>${task.description}</p>
                  <div class="footer">
                     <p id="date">${task.date}</p>
                     <div class="actions">
                        <span class="icon-thumb_up"></span>
                        <span class="icon-mode_edit"></span>
                        <span class="icon-delete"></span>
                     </div>
                  </div>
               </div>';
               console.log(task.completed);
               if(task.completed == "0"){
                  $('#pending-tasks').html(template);
               }else if(task.completed == "1"){
                  $('#completed-tasks').html(template);
               }
            });
      }
   });
}

I leave a capture to make it clearer