Обход вложенного 'ul' и сохранение данных через ajax

Question

Мне нужно сохранить данные во вложенном ul. Я хочу сначала проверить уровень глубины, затем перейти сверху и сохранить каждый ul отдельно с позицией.Это так, когда я получаю данные из базы данных, я знаю, куда добавить, какой ul и т. Д. Может ли кто-нибудь любезно пройти код и сказать мне, если мой подход правильный.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="start">
  <li>1</li>
</ul>
<ul>
  <li>1.1</li>
</ul>
<ul>
  <li>1.2</li>
</ul>
<ul>
  <li>1.2.1</li>
</ul>
<ul>
  <li>1.2.2</li>
</ul>
<ul>
  <li>1.2.2.1</li>
</ul>
<ul>
  <li>1.3</li>
</ul>

function myf() {
  var i;
  for (i = 0; i < 5; i++) {
    var c = document.getElementById("start");
    var x = c.getElementsByTagName("UL").length;

    for (j = 0; j < x; j++) {
      var position = i + "_" + j; // here actually what I want to save is the depth level and the child node index 

      var y = c.getElementsByTagName("UL")[j];
      var name = y.getElementsByTagName("LI")[0];

      $(document).ready(function() {
        $.ajax({
          url: "{% url 'save_data' %}",
          type: "POST",
          data: {
            csrfmiddlewaretoken: '{{ csrf_token }}',
            "position": position,
            "Name": name
          },
          async: false,
        });
      });
    }
  }