title: Sorting 2 different list of elements in JavaScript based on value (Name and Surname)
body: <p>I need some help. I have a multidimensional array containing a sub-array of length 2 ["name","surname"] both as a string value with the first letter capitalized.</p>
  
  <p>The request is to show the first 10 elements of an array at window load. After that, I use a button that load 10 more elements each time is pushed. This functionality works flawlessly.</p>
  
  <p>I am facing 2 problems:
  -I have 2 buttons, sort by name and sort by surname. You guessed properly. If "sort by name" btn is pressed you have to sort elements by name and the opposite if "sort by surname" is pressed.</p>
  
  <p>Following functions work well. Sort name and surname. The problem is that when name is sorted, the surname should follow the name to the correct place. Now I can sort both name and surname and the result is to have other full names after sorting.</p>
  
  <p>-The 2nd problem, if we fix the first one, is that if I load 10 or more elements (by pressing "load more" btn) I will need to press sort btn to sort them. I think I should have the initial arrays sorted and then start getting out items from the sorted list. But how do I sort an array with a sub array of ["Name","Surname"]? Thank you in advance</p>
  
  <pre class="lang-js prettyprint-override"><code>function sortByName(e) {
    e.preventDefault();
  
    let itemList = document.getElementById('item-list-two').children;
    let names = [];
    const itemListArray = Array.from(itemList);
  
    for (let i = 0; i &lt; itemListArray.length; i++) {
      names.push(itemListArray[i].innerText.toUpperCase());
      names.sort();
    }
  
    for (let i = 0; i &lt; itemList.length; i++) {
      itemList[i].textContent = names[i].charAt(0) + names[i].slice(1).toLowerCase();
    }
  }
  
  function sortBySurname(e) {
    e.preventDefault();
  
    let itemList = document.getElementById('item-list-three').children;
    let surnames = [];
    const itemListArray = Array.from(itemList);
    for (let i = 0; i &lt; itemListArray.length; i++) {
      surnames.push(itemListArray[i].innerText.toUpperCase());
      surnames.sort();
    }
  
    for (let i = 0; i &lt; itemList.length; i++) {
      itemList[i].textContent = surnames[i].charAt(0) + surnames[i].slice(1).toLowerCase();
    }
  }
  </code></pre>