I made a table that dynamically adds rows to my html table, it dynamically adds a delete button into the row too. I need to arrange the columns when table headings are clicked on!

```
<body>
  <div id="app">
    <form id="organiser">
      <label id="heading">Organiser</label>
  <br/>
      <br/>
      <label>No:</label>
      <input type="text" id="description"/>
      <br/>
      <label>Importance Level:</label>
      <select id="options1">
        <option value=" 1 " name="1" id="1"> 1 </option>
        <option value=" 2 " name="2" id="2"> 2 </option>
        <option value=" 3 " name="3" id="3"> 3 </option>
      </select>
      <br/>
      <label>Due Date:</label>
      <input type="date" id="date" />
      <br/>
      <input type="button" id="add" value="Add" onClick="addRowToTable();"/>
    </form>
    <br/>
    <table border="1" id="table">
      <tr>
        <th>No</th>
        <th>Task</th>
        <th>Importance</th>
        <th>Date Tasks Due</th>
        <th></th>
      </tr>
    </table>
  </div>
</body>

```