JSFiddle - React, Tailwind, and code Playground

HTML

<html>

  <head>
    <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  </head>

  <body>
    <div class="container">

      <div class="input-group">
        <input id="task" type="text" class="form-control" placeholder="to do">
        <span class="input-group-btn">
      <button id="btn" class="btn btn-default" type="button">Add to list</button>
    </span>
      </div>

      <table class="table">
        <thead>
          <th>#</th>
          <th>Task</th>
          <th>Done</th>
        </thead>
        <tbody id="tbl">
          <td>1</td>
          <td>
            <p class="text">Add bootstrap</p>
          </td>
          <td>
            <input type="checkbox"/>
          </td>
        </tbody>
      </table>
    </div>
  </body>

</html>

CSS

.complete{
  text-decoration: line-through;
}

JavaScript

var i = 1;
$("#btn").on("click", function() {

  var newRow =
    "<tr><td>" +
    ++i +
    "</td><td>" +
    $("#task").val() +
    "</td><td>" +
    "<input type='checkbox'/>" +
    "</td></tr>"

  $("#tbl").append($(newRow));
});

$("input[type=checkbox]").on("change", function() {
  $(this).parent().prev().toggleClass("complete")
});