I want create buttons with index inside.

let battle_element = `<div class="Battle"> Battle: <button data-index="${battles_list[i].battle_index}">Battle</button></div>`;

$('#battles_list').append(battle_element);

$(".Battle").on("click", function() {
        console.log($(this).data('index'));
})

How to get this battle index?

2

Bind the click handler to the button instead of the div:

let battle_element = `<div class="Battle"> Battle: <button data-index="1">Battle</button></div>`;

$('#battles_list').append(battle_element);

$(".Battle button").on("click", function() {
    console.log($(this).data('index'));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="battles_list"></div>

If for whatever reason you need it on the div instead, use $.find() to find the button inside the click handler:

let battle_element = `<div class="Battle"> Battle: <button data-index="1">Battle</button></div>`;

$('#battles_list').append(battle_element);

$(".Battle").on("click", function() {
    console.log($(this).find('button[data-index]').data('index'));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="battles_list"></div>