JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper flex data-flex" id="storedata">
  <div class="sortbox">
    <div class="propertysplit">
      <p class="prop_desc">f3e9db9a-974d-4385-9e5e-527268a246e4</p>
      <p class="prop_datefull">2022-05-02T17:51:11.6966667</p>
      <p id="prop_date">2022-05-02T17:51:11.6966667</p>
      <p class="prop_name">Test Property One</p>
      <p> <strong>Address:</strong><span class="prop_address1">Derby road</span><br><span class="prop_town">Derby</span><br><span class="prop_county">Derbyshire</span><br><span class="prop_postCode">DE11EE</span></p>
      <p class="prop_size"><strong>Size:</strong> <span class="numval">50000000</span></p>
    </div>
    <div class="propertysplit">
      <div id="f3e9db9a-974d-4385-9e5e-527268a246e4" class="owl-carousel margintop"></div>
    </div>
  </div>
    <div class="sortbox">
    <div class="propertysplit">
      <p class="prop_desc">527268a246e4f3e9db9a-974d-4385-9e5e</p>
      <p class="prop_datefull">2029-05-02T17:51:11.6966667</p>
      <p id="prop_date">2029-05-02T17:51:11.6966667</p>
      <p class="prop_name">Test Property Two</p>
      <p> <strong>Address:</strong><span class="prop_address1">Derby road</span><br><span class="prop_town">Leeds</span><br><span class="prop_county">West Yorkshire</span><br><span class="prop_postCode">LS34UF</span></p>
      <p class="prop_size"><strong>Size:</strong> <span class="numval">50000000</span></p>
    </div>
    <div class="propertysplit">
      <div id="f3e9db9a-974d-4385-9e5e-527268a246e4" class="owl-carousel margintop"></div>
    </div>
  </div>
  
</div>

	<button id="sortByDate">Sort by date (new to old)</button>
	<button id="sortByDateReverse">Sort by size (old to new)</button>

CSS

<style>
	strong{font-family:fontbold;}
	#myModal{display: none;position: fixed;z-index: 120;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgba(0,0,0,0.4);}
	.modal-content {position: fixed !important;top: 50%;left: 50%;transform: translate(-50%, -50%);background: white;border-radius: 4px;padding: 24px;width: 536px;}
	.modal-body{position:relative;}
	.modal-body span{display:block;font-family:fontbold;font-size:18px;line-height:30px;margin-bottom:16px;}
	.modal-content .close{display: inline-block;border:none;background:white;position:absolute;right:10px;border-radius:4px; top:10px;}
	.modal-content .close:before, .modal-content .close:after {position: absolute;left: 14px;top:6px;content: ' ';height: 20px;border-radius:2px;width: 2px;background-color: #333;}
	.modal-content .close:before {transform: rotate(45deg);}
	.modal-content .close:after {transform: rotate(-45deg);}
	.modal-content .close:hover{background:#efefef;}
	.modal-content h4{font-size:20px;}
	
	#myModal.openmodal1 #modal1{display:block; !important;}
		
	.propertysplit .openmodal5 {font-size: 19px;
    font-family: fontBold;
    letter-spacing: 0.0125rem;
    line-height: 40px;
    display: inline-flex;
    height: 40px;
    padding: 0 16px;
    position: relative;
    background-color: rgba(83, 131, 222, 0);
    border-radius: 4px;
    margin-top: 20px;
	background-color: #538316;
	color:#fff;
	border:0px;
	}
	@media(max-width:768px){
		.modal-content {width:408px;}
	}
	@media(max-width:480px){
		.modal-content {width:328px; padding:16px;}
	}
	@media(max-width:338px){
		.modal-content {width:304px;}
	}
	
	h1, .promo-content h2, .promo-content h3, .asda-tab__label, .promo-content strong {font-family:fontbold;}
	.promo-content h2 {margin-top: 0;}
	.promo-content h4 {margin: 0; line-height: 18px;}
	
	.promo-content h1{margin-top:0;}
	
	.asda-tab__label{font-size:28px;line-height:28px; margin:10px 0;}
	
	.promo-header{text-align:center; position: relative; padding: 60px;...

JavaScript

var sortByDateBtn = document.getElementById('sortByDate');
var sortByDateReverseBtn = document.getElementById('sortByDateReverse');	

function sortingByDate(){
  var items = document.querySelectorAll('.sortbox')
  Array.from(items).sort(function(a, b) {
    a = ~~a.querySelector('.prop_date').innerText
    b = ~~b.querySelector('.prop_date').innerText
    return b - a
  }).forEach(function(n, i) {
    n.style.order = i
  })
}
function sortingByDateReverse(){
  var items = document.querySelectorAll('.sortbox')
  Array.from(items).sort(function(a, b) {
    a = ~~a.querySelector('.prop_date').innerText
    b = ~~b.querySelector('.prop_date').innerText
    return a - b
  }).forEach(function(n, i) {
    n.style.order = i
  })
}	
sortByDateBtn.addEventListener('click', sortingByDate);
sortByDateReverseBtn.addEventListener('click', sortingByDateReverse);