Как распечатать индекс элемента списка в упорядоченном списке?

Question

У меня есть этот код, который при нажатии кнопки порождает группу элементов внутри списка.каждая из этих групп индексируется в упорядоченном списке в порядке возрастания 1,2,3 и т. д. Мне нужно, чтобы эти числа были сохранены для использования в моей базе данных.В настоящее время я не смог найти способ определить порядковый номер каждой группы в списке и таким образом добавить их в качестве атрибутов.Это мой JS для создания группы:

function spawnSilly() //spawn chapters function
        {
            var div = document.createElement("LI");
            var input = document.createElement("INPUT");
            var button = document.createElement("BUTTON");
            var del_button = document.createElement("BUTTON")
            input.setAttribute("type", "text");
            input.setAttribute("placeholder", "Title");
            input.setAttribute("id", "var timestamp = new Date().getUTCMilliseconds();")
            button.setAttribute("type", "button");
            button.setAttribute("onClick", "redirect()");
            button.setAttribute("id", "var timestamp = new Date().getUTCMilliseconds();")
            button.innerHTML = "Edit";
            div.setAttribute("id", "var timestamp = new Date().getUTCMilliseconds();")
            del_button.setAttribute("id", "var timestamp = new Date().getUTCMilliseconds();")
            del_button.innerHTML = "Delete";
            del_button.setAttribute("onClick", "removeElement(this.id)")
            div.appendChild(input)
            div.appendChild(button)
            div.appendChild(del_button);

            var list = document.getElementById("spawnList");
            list.insertBefore(div, list.childNodes[0]);
            set_index();
        }

Я использовал этот код JS для добавления индекса, но я не могу сказать, работает ли он, так как не могу распечатать индекс элемента порожденного списка.

function set_index()
        {
            var ol = document.getElementById('spawnList');

            // select the list items
            var lists = ol.getElementsByTagName('li');

            var l = lists.length; // total items
            //custom list id's via loop
            for (var i=1;i<=l;i++)
            {
            list[i].index = i;
            }

        }

Это мой HTML:

<ol id="spawnList">


    </ol>
    <button id="spawnbtn" onClick="spawnSilly(); ">Add</button>

Это действительно беспокоит меня, любая помощь будет фантастической!Спасибо:)

Answer 1

Я изменяю способ добавления тега li в тег ol, и он показывает индекс.

var list = document.getElementById("spawnList");         

  list.appendChild(div);

var index = 1;
function spawnSilly() //spawn chapters function
        {
            var div = document.createElement("LI");
            var input = document.createElement("INPUT");
            var button = document.createElement("BUTTON");
            var del_button = document.createElement("BUTTON")
            input.setAttribute("type", "text");
            input.setAttribute("placeholder", "Title");
            input.setAttribute("id", "var timestamp = new Date().getUTCMilliseconds();")
            button.setAttribute("type", "button");
            button.setAttribute("onClick", "redirect()");
            button.setAttribute("id", "var timestamp = new Date().getUTCMilliseconds();")
            button.innerHTML = "Edit";
            div.setAttribute("id", "var timestamp = new Date().getUTCMilliseconds();")
            del_button.setAttribute("id", "var timestamp = new Date().getUTCMilliseconds();")
            del_button.innerHTML = "Delete";
            del_button.setAttribute("onClick", "removeElement(this.id)")
            div.appendChild(input)
            div.appendChild(button)
            div.appendChild(del_button);

            var list = document.getElementById("spawnList");
            
            //var li = document.createElement("li");
            
  
  list.appendChild(div);
            console.log(index++);
            //list.insertBefore(div, list.childNodes[0]);
            //set_index();
        }

function set_index()
        {
            var ol = document.getElementById('spawnList');

            // select the list items
            var lists = ol.getElementsByTagName('li');
            if(lists != undefined){
              var l = lists.length; // total items
            //custom list id's via loop
            for (var i=1;i<=l;i++)
            {
            list[i].index = i;
            }
            }

          

        }

<ol id="spawnList">


    </ol>
    <button id="spawnbtn" onClick="spawnSilly(); ">Add</button>