index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
  <script src="index.js"></script>
</head>
<body>
    <div class="box">
      <h3>Create a task</h3>
      <p>
        <label for="task">Task</label>
      </p>
      <p>
        <input type="text" name="task">
      </p>
      <p>
        <button id="addTask">Add Task</button>
      </p>
    </div>
    <div class="card-columns">
      <p style="color: red;">The below div should be dynamically added to the .card-columns div after the Add Task button is clicked</p>
      <p style="color: red;">Use the given HTML structure to complete this assignment</p>
      <p>*************************************************************************</p>
      <div>
        <h2>task name here</h2>
        <form>
          <p>
            <input type="radio" name="complete" id="complete" value="true">
            <label for="complete">Complete</label>
          </p>
          <p>
            <input type="radio" name="complete" id="incomplete" value="false">
            <label for="incomplete">Incomplete</label>
          </p>
          <button>Update Task</button>
        </form>
      </div>
      <p>*************************************************************************</p>
    </div>
</body>
</html>