How can pass a value of data-attribute to another data-attribute

Question

I am trying to pass the value of data-megamenu in the data-target of the same element in order to create a bootstrap 4 accordion menu. I tried the script below but always returns the value of the last element.

Thank you in advance

HTML

<ul class="level2">
    <div class="categories">
        <li class="menu" data-megamenu="cat1" data-target="#cat8" data-toggle="collapse">
            <a href="#">
                <span class="icon icon-eikona_ixos"></span>
                <span class="text">Category1</span>
            </a>
        </li>
        <div class="megamenu" id="cat1"></div>
    </div>

    <div class="categories">
        <li class="menu" data-megamenu="cat2" data-target="#cat8" data-toggle="collapse">
            <a href="#">
                <span class="icon icon-eikona_ixos"></span>
                <span class="text">Category2</span>
            </a>
        </li>
        <div class="megamenu" id="cat2"></div>
    </div>

    <div class="categories">
        <li class="menu" data-megamenu="cat3" data-target="#cat8" data-toggle="collapse">
            <a href="#">
                <span class="icon icon-eikona_ixos"></span>
                <span class="text">Category3</span>
            </a>
        </li>
        <div class="megamenu" id="cat3"></div>
    </div>

    <div class="categories">
        <li class="menu" data-megamenu="cat4" data-target="#cat8" data-toggle="collapse">
            <a href="#">
                <span class="icon icon-eikona_ixos"></span>
                <span class="text">Category4</span>
            </a>
        </li>
        <div class="megamenu" id="cat4"></div>
    </div>


</ul>

JQUERY

$(function () {
  var li1 = $(".categories .menu");

  $.each(li1, function (index, element) {
    var li1Value = $(this).attr("data-megamenu");
    console.log(li1Value);
    li1.attr("data-target", "#" + li1Value);
    li1.attr("data-toggle", "collapse");
  });
});

Answer 1

Try like below

$(function () {
  var li1 = $(".categories .menu");

  $.each(li1, function (index, element) {
    var li1Value = $(this).attr("data-megamenu");
    console.log(li1Value);
    //li1.attr("data-target", "#" + li1Value);
    $(this).attr('data-target', li1Value);
    li1.attr("data-toggle", "collapse");
  });
});