مشكلة في كود JavaScript فلتر و فرز المنتجات

السلام عليكم

عندي هذا الكود كان بعمل جيدا لاكن بعد ان ربطته بداتابيس وحولته الى php صار فيه مشكلة في كود الجافاسكربت 

كود php

<?php
include 'db/config.php';

 ?>
<section class="portfolio">
      <div class="container">
         <div class="row">

            <div class="col-md-12 col-sm-12">
              <div class="iso-section wow fadeInUp" >

          <ul class="indicator clearfix">
            <li data-filter="all" class="active opc-main-bg"><a href="#">All Dress</a></li>
            <li data-filter="long" class="opc-main-bg"><a href="#">long Dress</a></li>
            <li data-filter="short" class="opc-main-bg"><a href="#">short Dress</a></li>
            <li data-filter="medium" class="opc-main-bg"><a href="#">mediam Dress</a></li>
          </ul>
          <div class="filter-condition">
      <span>View As a</span>
      <select   id="select">
        <option value="Default">Default</option>
        <option value="LowToHigh">Low to high</option>
        <option value="HighToLow">High to low</option>
      </select>

    </div>
       <div class="iso-box-section wow fadeInUp" >

             <div class="iso-box-wrapper col4-iso-box">
               <?php

      $res=mysqli_query($conn , "select * from productcategory inner join product on productcategory.id = product.cate_id where productcategory.name = 'Dress'");
      while ($row=mysqli_fetch_array($res)) {

        ?>
               <ul class="items">
                 <li data-category="" data-price="">

                   <div class="iso-box  col-md-4 col-sm-6">
                      <div class="portfolio-thumb">
                 <img src="admin/img/<?php echo $row["img1"];?>" class="img-responsive" alt="Portfolio"/>
                     </div>
               <div class="detail">
                 <h2><?php echo $row["name"];?></h2>

     						<strong><?php echo $row["descrebtion"];?></strong>

     						<span><?php echo $row["descr"];?></span>
                <h4>$<?php echo $row["price"];?></h4>
     						<a href="#"><i class="fas fa-shopping-cart"></i></a>
                <a href="#"><i class="fas fa-heart"></i></a>
               </div>
     					</div>

               </li>

             </ul>
             <?php
}

?>
             </div>

      </div>
              </div>
            </div>
 </div>
</div>
</section>

كود JavaScript 

(function() {

 		let field = document.querySelector('.items');
 		let li = Array.from(field.children);

 		function FilterProduct() {
 			for(let i of li){
 				const name = i.querySelector('strong');
 				const x = name.textContent;
 				i.setAttribute("data-category", x);
 			}

 			let indicator = document.querySelector('.indicator').children;

 			this.run = function() {
 				for(let i=0; i<indicator.length; i++)
 				{
 					indicator[i].onclick = function () {
 						for(let x=0; x<indicator.length; x++)
 						{
 							indicator[x].classList.remove('active');
 						}
 						this.classList.add('active');
 						const displayItems = this.getAttribute('data-filter');

 						for(let z=0; z<li.length; z++)
 						{
 							li[z].style.transform = "scale(0)";
 							setTimeout(()=>{
 								li[z].style.display = "none";
 							}, 500);

 							if ((li[z].getAttribute('data-category') == displayItems) || displayItems == "all")
 							 {
 							 	li[z].style.transform = "scale(1)";
 							 	setTimeout(()=>{
 									li[z].style.display = "block";
 								}, 500);
 							 }
 						}
 					};
 				}
 			}
 		}

 		function SortProduct() {
 			let select = document.getElementById('select');
 			let ar = [];
 			for(let i of li){
 				const last = i.lastElementChild.querySelector('h4');
 				const x = last.textContent.trim();
 				const y = Number(x.substring(1));
 				i.setAttribute("data-price", y);
 				console.log(y);
 				ar.push(i);
 			}
 			this.run = ()=>{
 				addevent();
 			}
 			function addevent(){
 				select.onchange = sortingValue;
 			}
 			function sortingValue(){

 				if (this.value === 'Default') {
 					while (field.firstChild) {field.removeChild(field.firstChild);}
 					field.append(...ar);
 				}
 				if (this.value === 'LowToHigh') {
 					SortElem(field, li, true)
 				}
 				if (this.value === 'HighToLow') {
 					SortElem(field, li, false)
 				}
 			}
 			function SortElem(field,li, asc){
 				let  dm, sortli;
 				dm = asc ? 1 : -1;
 				sortli = li.sort((a, b)=>{
 					const ax = Number(a.getAttribute('data-price'));
           const bx = Number(b.getAttribute('data-price'));
 					return ax > bx ? (1*dm) : (-1*dm);
 				});
 				 while (field.firstChild) {field.removeChild(field.firstChild);}
 				 field.append(...sortli);
 			}
 		}

 		new FilterProduct().run();
 		new SortProduct().run();
 	})();