jQuery use current data after its updated

Question

Im trying to get the current status of a specified seat, so every seat has the status free at the beginning, and the status will be changed to 'man', 'women' or 'child'.

So after I pick one of this status, for example: free to man! And I wanna alert the current status of the seat Ive updated, it shows me the old status free and not man! Here is the code:

I can't use click() function because im adding content than click on .man, .woman or .child, so i have to use on().

$(document).on("click", ".man, .women, .child", function() {
        var seatNumberHere = $(this).data("seat-number"); //Number of seat
        var seatPerson = $(this).data("person"); //Displays 'men', 'women' or 'child'

        $("[data-the-seat='" + seatNumberHere + "']").attr("data-status", seatPerson); //Updates the attribute data-status="free" to "men"
        alert($("[data-the-seat='" + seatNumberHere + "']").data("status")); //Here is the problem it shows still "free"
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="seat" style="top: 10px; left: 130px;"
          data-the-seat="1"
          data-status="free"
          data-toggle="popover"
          data-html="true"
          data-placement="top">
<div class='man' data-person='man' data-seat-number='1'>man</div><div class='women' data-person='women' data-seat-number='1'>women</div><div class='child' data-person='child' data-seat-number='1'>child</div>">
          1
        </div>

Answer 1

Here the data you get will stuck on the last accessed value because you're changing this last only in DOM

note that

• .attr() change this element DOM value and
• .data() will change the element value in a certain memory

so two different things

In order to get same value wether in dom (attr) or memory (data) you should set the value to both of them

See below Snippet :

$(document).on("click", ".man, .women, .child", function() {
    console.log(this);
    var seatNumberHere = $(this).data("seat-number"); //Number of seat
    var seatPerson = $(this).data("person"); //Displays 'men', 'women' or 'child'
    
    
    $("[data-the-seat='" + seatNumberHere + "']").attr("data-status", seatPerson);
    $("[data-the-seat='" + seatNumberHere + "']").data("status", seatPerson);
    //Updates the attribute data-status="free" to "men"
    
    alert("value of attr :"+$("[data-the-seat='" + seatNumberHere + "']").attr("data-status"));
    alert("value of data :"+$("[data-the-seat='" + seatNumberHere + "']").data("status")); //Here is the problem it shows still "free"
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="seat"
      style="top: 10px; left: 130px;"
      data-the-seat="1"
      data-status="free"
      data-toggle="popover"
      data-html="true"
      data-placement="top">
      <div class='man' data-person='man' data-seat-number='1'>M</div><div class='women' data-person='women' data-seat-number='1'>W</div><div class='child' data-person='child' data-seat-number='1'>C</div>"
      1
    </div>