JSFiddle - React, Tailwind, and code Playground

by grammar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div class="tasks-wrapper">
    <ul class="tasks"></ul>
</div>

CSS

/* To give an idea of grouping the subtasks to a task, I've given the subtasks color based on what task they belong to */

[data-task-id="1"] {
    color: red;
}

[data-task-id="2"] {
    color: blue;
}

[data-task-id="3"] {
    color: orange;
}

JavaScript

var tasks = [
  {name: 'clean apartment', subtasks: [1, 2, 3], id: 1},
  {name: 'do the dishes', subtasks: [6], id: 2},
  {name: 'eat lunch', subtasks: [4, 5], id: 3}
];

var subtasks = [
  {name: 'vaccuum', id: 1},
  {name: 'dust', id: 2},
  {name: 'wipe down', id: 3},
  {name: 'make sandwich', id: 4},
  {name: 'drink a beer', id: 5},
  {name: 'soak pans', id: 6}, 
];


var i, 
    j, 
    l = tasks.length, 
    $taskList = $('.tasks');
// Loop through the tasks to get each task's array of subtasks
for(i = 0; i < l; i++) {
  var task = tasks[i],
      ll = task.subtasks.length;
  // Loop through a task's subtasks to create a "card" for each
  // subtask, illustrated here by a simple <li> element.
  for(j=0; j < ll; j++) {
      var subtask = _.findWhere(subtasks, {id: task.subtasks[j]}), 
	      $taskCard = $('<li class="subtask">' + subtask.name + '</li>');
      // Keep track of the subtask and task IDs in data-attributes
      // to reference later (for things like marking a subtask as
      // complete).
      $taskCard.attr('data-task-id', task.id);
      $taskCard.attr('data-subtask-id', subtask.id);
      // Add subtask "card" to the DOM
      $taskList.append($taskCard);
  }
}