Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script
              src="https://code.jquery.com/jquery-3.3.1.js"
              integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
              crossorigin="anonymous"></script>
</head>
<body>
    <h1>PRIVET {{author}}</h1>


    <form action="/" method="POST">
        {% csrf_token %}
        {{form.first.label}}: {{form.first}}
        {{form.second.label}}: {{form.second}}
        <input type="submit" value="Submit">
    </form>

    <table>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">date</th>
      <th scope="col">first</th>
      <th scope="col">second</th>
      <th scope="col">result</th>
      <th scope="col">author</th>
      <th scope="col">action</th>
    </tr>
  </thead>
  <tbody>
    {% for calc in history %}
      <tr id="{{calc.id}}">
          <th scope="row">{{calc.id}}</th>
          <td> {{calc.date}}</td>
          <td>{{calc.first}}</td>
           <td>
                    {{calc.second}}
                </td>
                <td>
                    {{calc.result}}
                </td>
                <td>
                    {{calc.author}}
                </td>
          <td>
               <button onclick="calc_del({{ calc.id }})")>DELETE</button>
          </td>
      </tr>
    {% endfor %}

  </tbody>
</table>

<script>
    function calc_del(id)
    {
        $.ajax({
                type: "POST",
                url: 'calc_history/delete',
                data:{
                    id: id,
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                },
                success: function(response){
                    x = document.getElementById(JSON.stringify(id))
                    x.remove()
                }
                });
    }
</script>

</body>
</html>