如何将一个JSON文件添加到我的wordpress服务器，用添加的文本保存并读取它？

Question

I want to develop a TODO list which is available for my little coding team. Therefore the files must be saved on the server and not on the localStorage. But how can i do it? After the file is getting a new list item everyone who has an login to the server should be able to see this.

I am a completely beginner in javascript. But I read that the language Ajax ist used for some code. I don't have any idea how to solve this problem.

HTML

    <center>TODO: Website</center>
    <form id="form-website">
        <div class="input-group">
            <input id="input-todo-website" class="form-todo" placeholder="Füge hier eine Aufgabe hinzu">
            <span>
                <button id="btn-add" type="button" class="btn">Hinzufügen</button>
            </span>
        </div>
    </form>
    <div>
        <ul id="list-todo-website" class="list">

        </ul>
    </div>
    <div>
        <button id="btn-clear-website" type="button" class="btn">Löschen</button>
    </div>

JavaScript

window.onload = function() {
    //variables
    listNewsletter();
    listSonstiges();
    var form = document.getElementById("form-website");
    var input = document.getElementById("input-todo-website");
    var btn = document.getElementById("btn-add");
    var list = document.getElementById("list-todo-website");    
    var btnClr = document.getElementById("btn-clear-website");  
    var btnClrSonstiges = document.getElementById("btn-add-sonstiges");
    var id = 1;
    // listItem = {item: "todo item", checked: flase}
    var liItemWebsite = "";
    var todoListWebsite = [];

    //button event listener
    btn.addEventListener("click", addTodoItemWebsite);

    //list event listener
    list.addEventListener("click", boxCheckedWebsite);

    //event listener for clear list
    btnClr.addEventListener("click", clearListWebsite);

    if(localStorage.length <= 0) {
        btnClr.style.display = "none";
    }

    //checking localstorage has data
    if(localStorage.length > 0) {
        displayListWebsite();
    }


    //add todo item to list
    function addTodoItemWebsite() {
        if(input.value === "") {
            alert("Du musst eine Aufgabe hinzufügen!");
        }
        else {
            if(list.style.borderTop === "") {
                list.style.borderTop = "2px solid white";
                btnClr.style.display = "inline";
            }
            var text = input.value; 
            var item = `<li id="li-${id}">${text}<input id="box-${id}" class="checkboxes" type="checkbox"></li>`;               
            list.insertAdjacentHTML('beforeend', item); 
            liItemWebsite = {item: text, checked: false};
            todoListWebsite.push(liItemWebsite);        
            id++;
            addToLocalStorage()
            form.reset();
        }
    }

    //adding string through style to list itme
    function boxCheckedWebsite(event) {
        const element = event.target;
        if(element.type === "checkbox") {
            element.parentNode.style.textDecoration = "line-through";
            todoListWebsite = JSON.parse(localStorage.getItem("todoListWebsite"));
            todoListWebsite[element.id.split('-')[1]-1].checked = element.checked.toString();
            localStorage.setItem("todoListWebsite", JSON.stringify(todoListWebsite));
        }
    }

    //adding data to local storage
    function addToLocalStorage() {
        if(typeof(Storage) !== "undefined") {
            localStorage.setItem("todoListWebsite", JSON.stringify(todoListWebsite));
        }
        else {
            alert("Dein Browser unterstützt keinen 'LocalStorage'! Somit können deine Daten nicht gespeichert werden");
        }
    }

    function displayListWebsite() {
        list.style.borderTop = "2px solid white";
        todoListWebsite = JSON.parse(localStorage.getItem("todoListWebsite"));
        todoListWebsite.forEach(function(todoListWebsite) {
            console.log(todoListWebsite.item)
            var text = todoListWebsite.item;
            var item = `<li id="li-${id}">${text}<input id="box-${id}" class="checkboxes" type="checkbox"></li>`;
            list.insertAdjacentHTML("beforeend", item);

            if(todoListWebsite.checked) {
                var li = document.getElementById("li-"+id);
                li.style.textDecoration = "line-through";
                li.childNodes[1].checked = todoListWebsite.checked;
            }
            id++;
        });
    }