I’m trying to add this data on database when it’s clicked. It updates on my website which is static. But the data in not updating on the Database.

Showing list From database on index.html

<ul id="myUL">
    {% for name in names %}

    {% if name.com == True %}
    <li class="checked">{{name.names}}</li>
    {% else %}
    <li>{{name.names}}</li>
    {% endif %}
    {% endfor %}
</ul>

JavaScript code on index.html.
I want to make it like if I click on the button then the the data will be added in the database. Then if i Refresh it The new task which I’ve implemented. It’ll show.

Also When the on of the item is checked it will be updated which is true or false. When I check one of the tasks it’ll automatically update the database.

// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');
  }
}, false);

// Create a new list item when clicking on the "Add" button
function newElement() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("myInput").value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);
  if (inputValue === '') {
    alert("You must write something!");
  } else {
    document.getElementById("myUL").appendChild(li);
  }
  document.getElementById("myInput").value = "";

  var span = document.createElement("SPAN");
  var txt = document.createTextNode("u00D7");
  span.className = "close";
  span.appendChild(txt);
  li.appendChild(span);

  for (i = 0; i < close.length; i++) {
    close[i].onclick = function() {
      var div = this.parentElement;
      div.style.display = "none";
    }
  }
}

models.py

from django.db import models

# Create your models here.


class todo(models.Model):
    names = models.CharField(max_length=128)
    com = models.BooleanField()
    
    def __str__(self):
        return f"{self.names} ({self.com})"

views.py

from django.shortcuts import render
from .models import todo



# Create your views here.

def index(request):
    return render(request, "mytasks/index.html", {
        "names": todo.objects.all()
    })