Todo-Ajax-Django.html

{% load static %}

<html>

<head>
    <style>
        #space {
            width: 250%;
            text-align: left;
            color: black;
            padding: 4%;
        }

        #space1 {
            padding: 7px;
        }

        div.bottom {
            position: absolute;
            bottom: 10px;

        }


        .dark {
            width: 700px;
            height: 100px;
            background-repeat: no-repeat;
            background-size: 300px 100px;
            background-color: aqua;
            text-decoration-line: line-through;

        }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
let i=1;
    $(document).ready(function(){

        $("#space1").click(function(e){
            e.preventDefault();
            
            var x = document.createElement("P");
            x.innerHTML = document.getElementById("space").value;
            var att=document.createAttribute('id');
            att.value=i;
            x.setAttributeNode(att);
            var btn = document.createElement("BUTTON");
            var t = document.createTextNode("CLICK ME");
            btn.setAttribute('id','butt');

            btn.appendChild(t);
            x.appendChild(btn);
            //btn.setAttribute("onclick", alert("clicked"));
            
            //x.onclick = () => { myFunction(x) };
            var items = document.getElementById('mydiv');
            items.appendChild(x);
            //document.getElementsByTagName("P")[i].setAttribute("id",i);
            i=i+1;
        

    $.ajax({
        type:'POST',
        url:'base',
        data:{
            name:$('#space').val(),
            csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
        },
        success:function(){
        }
        })
        document.getElementById("space").value = "";
        
        })
        
        
        $("#butt").on("click", function(){
           
            alert("load")
                $.ajax({
                    type:'POST',
                    url:'deleting',
                   data:{
                       delete:$(this).attr('id'),
                       csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
                       },
                   success:function(){
                       alert(deleted)
                   }
               })

            })

           
    });

</script>


</head>

<body >
{% csrf_token %}
    <div id="text">

        <p id="new"> hi bay</p>


    </div>

    <div id="mydiv">
    </div>
    <div class=bottom>

        <input id="space" type="text" placeholder="Enter the text...">
        <button id="space1">Submit</button>

    </div>

</body>

</html>