API DELETE method issue

I have an issue with my javaScript code as the delete feature is working but, it is not deleting the right data ... Example: 1 - test1 2 - test2 3 - test3

My issue is when I try to delete test1, the program deletes test3 which means the program always deletes the last data in the list.

Please, could you help?

Here's my code:

const url = "https://ghu8xhzgfe.execute-api.us-east-1.amazonaws.com/tasks/2877332";
let theTask = [];
let text = '';
const init = () => {
    document.querySelector("#newTask").addEventListener("click", addNewTask);
    addNewTask();
    getDataa();
};
const addNewTask = () => {
    console.log("Adding a new task...");
    let xhr = new XMLHttpRequest();
    let url = "https://ghu8xhzgfe.execute-api.us-east-1.amazonaws.com/tasks";
    let apiKey = "Itcheui2tB58SlUGe8rrP8mskudGsNDT9nfKKG9S";
    let studentId = "2877332";
    let taskDescription = document.querySelector("#task").value;
    let theTask = taskDescription;

    let params = {
        StudentId: studentId,
        Description: taskDescription
    };
    xhr.open("post", url);

    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.setRequestHeader("x-api-key", apiKey);
    xhr.onreadystatechange = () => {
        if (xhr.readyState == 4) {
        }
    }
    xhr.send(JSON.stringify(params));
    getDataa();
};
const getDataa = () => {
    console.log("get Data")
    fetch(url, {
            method: "GET",
            withCredentials: true,
            headers: {
                "x-api-key": "Itcheui2tB58SlUGe8rrP8mskudGsNDT9nfKKG9S",
                "Content-Type": "application/json"
            }
        })
        .then(resp => resp.json())
        .then(function(data) {
            console.log(data);
            // Loop to access all rows
            for (i = 0; i <= data.ScannedCount; i++) {

                let text = '';
                //const items = data.Items[i].Description;
                Array.from(data.Items).forEach(myFunction);
                // display the data to the end user and link it to the index page
                document.getElementById("displayTable").innerHTML = text;

                function myFunction(item, index) {

                    theTask= data.Items[index].Description;
                    text += ' <button type="button" class="btn" id="task2" onclick="deleteData()"> <i class="fa fa-trash"></i> </button> '+ "  " + data.Items[index].Description +   "<br>";
                }
            }

        })
        .catch(function(error) {
            console.log(error);
        });
}
async function deleteData() {
    console.log("deleteing data");

    let xhr = new XMLHttpRequest();
    let url = "https://ghu8xhzgfe.execute-api.us-east-1.amazonaws.com/tasks/";
    let studentId = "2877332";
    let taskDescription = theTask;
    fetch(url, {
            method: 'DELETE',

            headers: {
                "Content-Type": "application/json",
                "x-api-key": "Itcheui2tB58SlUGe8rrP8mskudGsNDT9nfKKG9S",
            },

            body: JSON.stringify({
                'StudentId': studentId,
                'Description': taskDescription,
                'version': 'JSON',
            }),
        })
        .then(res => res.json()).then(console.log);
        console.log(taskDescription);
        getDataa();
}
window.onload = init;

Via Active questions tagged javascript - Stack Overflow https://ift.tt/BlExXgL