isotope сортировка по определенному имени

// init Isotope 
var $grid = $('.grid').isotope({ 
  itemSelector: '.element-item', 
  layoutMode: 'fitRows', 
  getSortData: { 
    date: function(itemElem) { 
      return Date.parse($(itemElem).find('.date').data('time')); 
    }, 
    popular: function(itemElem) { 
      return parseInt($(itemElem).find('.comment').data('comment'), 10); 
    }, 
    name1: function(itemElem) { 
      return $(itemElem).find('.name1').length; 
    }, 
    name2: function(itemElem) { 
      return $(itemElem).find('.name2').length; 
    }, 
    name3: function(itemElem) { 
      return $(itemElem).find('.name3').length; 
    }, 
  }, 
  sortAscending: false, 
  // sortBy: 'new', 
}); 
 
// bind sort button click 
$('.sort-by-button-group').on('click', 'button', function() { 
  var sortValue = $(this).attr('data-sort-value'); 
  $grid.isotope({ 
    sortBy: sortValue 
  }); 
}); 
 
// change is-checked class on buttons 
$('.button-group').each(function(i, buttonGroup) { 
  var $buttonGroup = $(buttonGroup); 
  $buttonGroup.on('click', 'button', function() { 
    $buttonGroup.find('.is-checked').removeClass('is-checked'); 
    $(this).addClass('is-checked'); 
  }); 
});

.element-item { 
  border: 1px solid #eee; 
  width: 100%; 
  padding-left: 1rem; 
  font-family: monospace; 
} 
 
.date { 
  display: block; 
  color: #777; 
  margin-bottom: 1rem; 
} 
 
.comment { 
  display: block; 
  margin-bottom: 1rem; 
} 
 
button.is-checked { 
  background: #000; 
  color: #fff; 
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script> 
 
 
 
<div class="button-group sort-by-button-group"> 
  <button class="button is-checked" data-sort-value="original-order">ALL</button> 
  <button class="button" data-sort-value="date">New</button> 
  <button class="button" data-sort-value="popular">Popular</button> 
  <button class="button" data-sort-value="name1">Name 1</button> 
  <button class="button" data-sort-value="name2">Name 2</button> 
  <button class="button" data-sort-value="name3">Name 3</button> 
</div> 
 
 
<div class="grid"> 
  <div class="element-item " data-category="it 1"> 
    <h3 class="name name1">Name 1</h3> 
    <span class="date" data-time="2017-07-02">02.07.2017</span> 
    <span class="comment" data-comment="1">1 comment</span> 
  </div> 
  <div class="element-item " data-category="it 2"> 
    <h3 class="name name2">Name 2</h3> 
    <span class="date" data-time="2018-01-01T08:23:11">01.01.2018 08:23:11</span> 
    <span class="comment" data-comment="20">20 comments</span> 
  </div> 
  <div class="element-item " data-category="it 3"> 
    <h3 class="name name3">Name 3</h3> 
    <span class="date" data-time="2017-07-05">05.07.2017</span> 
    <span class="comment" data-comment="33">33 comments</span> 
  </div> 
  <div class="element-item " data-category="it 1"> 
    <h3 class="name name1">Name 1</h3> 
    <span class="date" data-time="2018-03-20T08:23:11">20.03.2018 08:23:11</span> 
    <span class="comment" data-comment="100">100 comments</span> 
  </div> 
  <div class="element-item " data-category="it 2"> 
    <h3 class="name name2">Name 2</h3> 
    <span class="date" data-time="2017-10-14">14.10.2017</span> 
    <span class="comment" data-comment="5">5 comment</span> 
  </div> 
  <div class="element-item " data-category="it 3"> 
    <h3 class="name name3">Name 3</h3> 
    <span class="date" data-time="2018-06-07">07.06.2018</span> 
    <span class="comment" data-comment="1">1 comment</span> 
  </div> 
  <div class="element-item " data-category="it 1"> 
    <h3 class="name name1">Name 1</h3> 
    <span class="date" data-time="2017-09-01">01.09.2017</span> 
    <span class="comment" data-comment="1">1 comment</span> 
  </div> 
  <div class="element-item " data-category="it 2"> 
    <h3 class="name name2">Name 2</h3> 
    <span class="date" data-time="2017-11-11">11.11.2017</span> 
    <span class="comment" data-comment="3">3 comments</span> 
  </div> 
  <div class="element-item " data-category="it 3"> 
    <h3 class="name name3">Name 3</h3> 
    <span class="date" data-time="2018-04-03">03.04.2018</span> 
    <span class="comment" data-comment="26">26 comments</span> 
  </div> 
</div>

const buttons = document.querySelector('.sort-by-button-group'); 
const grid = document.getElementsByClassName('grid')[0]; 
const children = grid.children; 
const originalOrder = [] 
buttons.addEventListener('click', sorting); 
 
for (let i=0; i<children.length; i++) { 
	originalOrder[i] = children[i] 
} 
 
function sorting(event) { 
const target = event.target 
const value = target.dataset.sortValue; 
const sortList = [] 
for (let i=0; i<children.length; i++) { 
	sortList[i] = children[i] 
} 
sortList.sort((a,b) => { 
	if (value != "original-order" && value != "category") { 
		return (a.classList.contains(value)) ? -1 : 1 
	} 
	if (value === "category") { 
		return a.dataset.category < b.dataset.category 
	} 
}) 
grid.innerHTML = ""; 
sortList.forEach((item) => { 
	grid.appendChild(item) 
}) 
if (value === "original-order") { 
		originalOrder.forEach((item) => { 
		grid.appendChild(item) 
	}) 
} 
}

.element-item { 
  width: 100%; 
  border:1px solid #333; 
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script> 
   
   
<div class="button-group sort-by-button-group"> 
  <button class="button is-checked" data-sort-value="original-order">original order</button> 
  <button class="button" data-sort-value="mercury">Mercury</button> 
  <button class="button" data-sort-value="tellurium">Tellurium</button> 
  <button class="button" data-sort-value="category">category</button> 
</div> 
 
<div class="grid"> 
  <div class="element-item transition metal mercury" data-category="transition"> 
    <h3 class="name">Mercury</h3> 
    <p class="symbol">Hg</p> 
    <p class="number">80</p> 
    <p class="weight">200.59</p> 
  </div> 
  <div class="element-item metalloid tellurium" data-category="metalloid"> 
    <h3 class="name">Tellurium</h3> 
    <p class="symbol">Te</p> 
    <p class="number">52</p> 
    <p class="weight">127.6</p> 
  </div> 
  <div class="element-item transition metal mercury" data-category="transition"> 
    <h3 class="name">Mercury</h3> 
    <p class="symbol">Hg</p> 
    <p class="number">80</p> 
    <p class="weight">200.59</p> 
  </div> 
  <div class="element-item metalloid tellurium" data-category="metalloid"> 
    <h3 class="name">Tellurium</h3> 
    <p class="symbol">Te</p> 
    <p class="number">52</p> 
    <p class="weight">127.6</p> 
  </div> 
</div>