Нет доступа к id

<tbody id="users">
        {% for user in users %}
            <tr id= "{{ user.id }}">
                <td>{{ user.id }}</td>
                <td>{{ user.username }}</td>
                <td>{{ user.email }}</td>
                <td>{{ user.role }}</td>
                <td><button data-index={{ user.id }} type="submit">Delete</button></td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script>
      $(document).ready (function () {
        $("#users").bind("click",function (event) {
            const id=event.target.dataset.dataIndex;
            alert(id);
            $.ajax ({
                url:"useredit/del",
                type: "GET",
                data: ({id:id})
            })
        })
    })
  </script>

Когда тапаю на кнопку, то пишет, что

id undefined

Что я указал не так?