How to call a function after mouseup (mouse release) in JavaScript?

Question

I am trying to call a function after I release the mouse button, the function I am trying to call it after mouseup event is going to update the localstorage. The problem is I can see the console.log but it doesn't make any changes on locolstorage.

HTML

 <li class="item ui-state-default " draggable="true" id="${id}" onmouseup="mouseUp()">
     <p class="text" >${tileName}</p>
                 
       <span class="close" tile="delete" id="${id}">&times;</span>
   </li>

JavaScript

function saveOrder() {

    const char = document.querySelectorAll('.text');
    const num = document.querySelectorAll('li');
    const charArray = jQuery.makeArray(char);
    const numArray = jQuery.makeArray(num);

    nameArray = charArray.map(e => e.innerText);
    idArray = numArray.map(e => e.id)

    let saveIt = nameArray.map((i, idx) => ({
      name: i,
      id: +idArray[idx],
      trash: false
    }));


    localStorage.setItem('TILES', JSON.stringify(saveIt));
  }

function mouseUp() {
  saveOrder()
  console.log("mouseUP function called!")
}

Answer 1

The problem must be somewhere else in your code. I ran this in jsFiddle and it works. jsFiddle

function mouseUp() {

  function saveOrder() {

    const char = document.querySelectorAll('.text');
    const num = document.querySelectorAll('li');
    const charArray = jQuery.makeArray(char);
    const numArray = jQuery.makeArray(num);

    nameArray = charArray.map(e => e.innerText);
    idArray = numArray.map(e => e.id)

    let saveIt = nameArray.map((i, idx) => ({
      name: i,
      id: +idArray[idx],
      trash: false
    }));
    
    localStorage.setItem('TILES', JSON.stringify(saveIt));
  }
  saveOrder()
  console.log("mouseUP function called!")
  
  // Added lines
  const tiles = JSON.parse(localStorage.getItem('TILES'))
  console.log({tiles}) // console.log shows saved TILES
}