Jinja code rendered using ajax is enclosed witin doublequorts in django project - django

Question

I am developing a todo app using django as backend and html,css,bootstrap for frontend,
I used Ajax in this project to load data from server without refresh.
**Look at the image **
the {%csrf_token%} is passed through ajax but is is renderd in html page as a text within a double quort.
How to fix this
I want to render the {%csrf_token%} in the webpage without double quorts.
Ajax code
$.ajax({
type:'POST',
url:'/task/'+todo_id+'/new_todo/',
processData: false,
contentType: false,
data: data,
success: function(response){
console.log("**********Data send to backend");
var new_id = response['new_id'];
var new_color = response['new_color'];
var new_status = response['new_status']
var new_todo_note = response['new_todo_note']
if (new_todo_note == null){
my_note = " "
}
else{
my_note = new_todo_note
}
$("#"+todo_id).hide();
$.ajax({
type:'GET',
url:'/task/'+todo_id+'/new_todo/',
data:data,
dataType:'json',
success: function(response){
var todo_section = `<ol class="list-group mb-3 v1" id="${response.latest_todo.id}right">
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto d-flex">
<div>
<div class="fw-bold">${response.latest_todo_name}</div>
<p style="font-size: x-small; margin:0;">${response.latest_todo_added_date}</p>
<div style="max-width: 100px; display:flex; ">
<div id="${new_id}task_note">
${my_note}
</div>
</div>
</div>
<div class="mt-1 ms-4">
<a href="{%url 'todo-details' todo.id%}">
<i class="fa-solid fa-arrow-up-right-from-square text-muted"></i>
</a>
</div>
</div>
<div class="d-flex flex-column">
<div style="align-self: flex-end;" id="${new_id}badge_live">
<span class="badge rounded-pill" id="${new_id}badge" style="background-color:${new_color};">&nbsp&nbsp&nbsp
</span>
</div>
<div class="mt-2 d-flex">
<div class="me-2">
<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#exampleModal" style="font-size: xx-small;">
Note
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Create Task Note</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form action="/todo/${new_id}/add_note/" method="post" id="task_note_form" name="${new_id}" enctype="multipart/form-data">
{%csrf_token%}
<div class="modal-body">
<div>
<h2>Add Task Note</h2>
</div>
<div class="mb-3">
<textarea name="note" id="note${new_id}" cols="15" rows="5" class="form-control" required></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary note_submit_btns" value="Create" data-bs-dismiss="modal" name="${new_id}">
</div>
</form>
</div>
</div>
</div>
</div>
<div id="${new_id}btn_live_change">
<div id="${new_id}btn_live">
<input type="submit" value="${new_status}" id="${new_id}"
class="btn btn-primary stat_btns"
style="font-size: xx-small;">
</div>
</div>
</div>
</div>
</li>
</ol>`
$("#display-todo-data").append(todo_section);
document.getElementById("task_note_form").reset();
},
});
}
});
}
});