Mini build: a grouped task board

Build a board with three columns, in this order: <section id="col-todo">, <section id="col-doing"> and <section id="col-done">. Each has an <h2> reading To do (N), Doing (N) or Done (N), where N is the number of tasks in it.

Group the tasks state by status and render each task as an <li> in its column, showing its title. In the To do and Doing columns each <li> also has a button Next that moves the task to the next column (todo → doing → done).

An empty column shows <p className="empty">Nothing here</p> and no <li>.

Typing a title into <input id="new-task"> and clicking <button id="add"> adds a new task to To do with its own unique id, and clears the input. An empty title adds nothing.