change value of element attributes to that of another attribute

I want the value of attribute 'data-bs-content' in all elements to be set to the value found in the 'data-my-data' attribute when the document is loaded.

I've tried about a dozen different strategies that I could think of, but none seem to be working.

The reason I don't just put the value in 'data-bs-content' is because there will be processing that happens on the data in 'data-my-data' before setting the value.

<!doctype html>
<html>

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>

    <script>
        $(document).ready(function() {

          var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
          var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
            var popover = new bootstrap.Popover(popoverTriggerEl, {
              container: 'body',
              trigger: 'click'
            });
            return popover;
          });

          var $element = $('[data-bs-content]');
          $element.attr( "data-bs-content" , function(index, currentValue) {
            return $(this).getAttribute('data-my-data');
          });

        });
    </script>

</head>

<body>
<br/>
<a href="#"
   data-bs-toggle="popover"
   data-bs-content="default data"
   data-my-data="my data 1"
>
    CLICK ME 1
</a>
<br/>
<br/>
<a href="#"
   data-bs-toggle="popover"
   data-bs-content="default data"
   data-my-data="my data 2"
>
    CLICK ME 2
</a>

</body>
</html>

Solution

Thanks guys.

I have no idea why, but Xavier's suggestion was giving me:

jquery.min.js:2 jQuery.Deferred exception: t.toLowerCase is not a function TypeError: t.toLowerCase is not a function

Rory's tip and suggestion worked perfectly. Fixing how I was accessing the attribute value and setting the values before initializing the popover did the trick.

    <script>
        $(document).ready(function() {

          var $element = $('[data-bs-content]');
          $element.attr( "data-bs-content" , function(index, currentValue) {
            return $(this).attr('data-my-data');
          });

          var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
          var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
            var popover = new bootstrap.Popover(popoverTriggerEl, {
              container: 'body',
              trigger: 'click'
            });
            return popover;
          });

        });
    </script>