How to update data attribute using JQuery?-CodePudding

I am trying to use JQuery to update a data attribute after clicking on a button. Please take a look at what I have tried below. When I click on the div with class previous-wrapper, the whole block is well updated, and the data-nb-attribute get the correct value. But, when I click on this div for the second time, data-nb-attribute gets the value NaN..
Is there another way to dynamically update and retrieve the value of this attribute?

$(function(){ 
  $(document).on('click','.previous-wrapper',function(){ 
        var get_nb = $(this).find('.previous');
        get_nb = get_nb.data("nb");
        get_nb = parseInt(get_nb)
   
        //Dom to update
        arr_left = $('<i/>', {
                            className: 'fa-solid fa-arrow-left'
                        });

        previous = $('<div/>', {
                        className: 'previous',
                        'data-nb': get_nb-5,
                        html: "Previous"
                    });
   
   //Question 2. How to append previous to arrow_left 

        $(".previous-wrapper").html(previous);
    });
 });

.previous-wrapper{
  cursor: pointer;
  background:red; 
  width:100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <i ></i>
  <span  data-nb="100">Previous</span>
</div>

I would also like to know how to add multiple DOM created by JQuery.

CodePudding user response：

You're overwriting the HTML with an invalid attribute of "classname" instead of "class", which means on the second interation $('.previous') won't match anything.

Corrected version of your code:

$(document).on('click', '.previous-wrapper', function() {
  var get_nb = $(this).find('.previous');
  get_nb = get_nb.data("nb");
  get_nb = parseInt(get_nb)

  //Dom to update
  arr_left = $('<i/>', {
    class: 'fa-solid fa-arrow-left'
  });

  previous = $('<div/>', {
    class: 'previous',
    'data-nb': get_nb - 5,
    html: "Previous"
  });

  // including both elements at once:
  $(".previous-wrapper").html([arr_left, previous]);

  console.log($('.previous-wrapper').html())
});

.previous-wrapper {
  cursor: pointer;
  background: red;
  width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <i ></i>
  <span  data-nb="100">Previous</span>
</div>

It would be much, much simpler, however, to simply update the one attribute you want to update, instead of rewriting all the HTML every click:

$(document).on('click', '.previous-wrapper', function() {
  let el = $(this).find('.previous')

  // update the data attribute using .attr() instead of .data() because jQuery handles .data internally; it's not reflected in the DOM
  el.attr('data-nb', Number(el.attr('data-nb')) - 5);

  console.log($('.previous-wrapper').html())
});

.previous-wrapper {
  cursor: pointer;
  background: red;
  width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <i ></i>
  <span  data-nb="100">Previous</span>
</div>