how can i pass an element from a function to change the value format

Question

${detailInfo.expiry} is a date in a format like 2021-12-09T05:04:06.751Z. I want to pass it to the beautifiedDate function and I want that value to bind in my HTML page in place of ${detailInfo.expiry}.

I can't figure out how can I pass ${detailInfo.expiry} from a foreach to beautifiedDate and get that value.

I can easily do that for a single value but how can I do that in a loop? How can I pass a value in a function in foreach.

async function renderViewDetails(data, dataTableOrders) {
  let ordersDetails = data.group_id;
  var detailInfos = dataTableOrders;

  let html =
    `<div class="viewDetailModal">
      <div class="detailButtonModal">
        <p class="viewOrderId">ID:</p>
        <p class="orderdetailsid viewOrderId">${data.id}</p>
        <p class="coinviewDetail">${data.coin}</p>
      </div>
      <div class="detailButtonModal">
        <p class="orderPnl">PNL</p>
        <p class="ordersPnlDetails"> &nbsp; ${data.group_pnl} </p>
      </div>
      <div class="rb-container">
        <ul class="rb">`;

  detailInfos.forEach(detailInfo => {
    if (detailInfo.group_id == ordersDetails) {
      let htmlSegment = `
              <li class="rb-item timelimeVertical" ng-repeat="itembx">
                <div class="tradingOrdersInfo">
                <p class="orderDetailDate">${detailInfo.openedAt}</p>
        
                <div class="tradeOrderType">
                <p class="viewDetailOrderType">${detailInfo.type}</p>
                <button id="showMoreLess_${detailInfo.id}" 
                 data-order-id="${detailInfo.id}" 
                 class="viewDetailOrderButton">View 
                 More</button>
                </div>
        
                                
                <div id="showme_${detailInfo.id}" style="display:none";>
        
                <div class="tradeOrderEntry">
                <div>
                <p class="orderDetailQuantity">Quantity:</p>
                <p class="orderDetailQuantityValue">${detailInfo.volume}</p>
               </div>
               <div class="tradeOrdervaluePrice">
               <p class="orderPnlInner"> &nbsp; ${detailInfo.group_pnl}</p>
               <p class="pnlInnerLabel">PNL</p>
               </div>
               </div>
        
               <div class="tradeOrderEntry tradeOrderEntryValue">
               <div>
               <p class="detailEntryValue">$${detailInfo.entry}</p>
               <p class="detailEntryValue entryOpa">Entry Price</p>
               </div>
        
               <div class="tradeOrdervaluePrice">
               <p class="detailCloseValue">$1690</p>
               <p class="viewCloseLabel">Close Price</p>
               </div>
               </div>
        
               <div class="tradeOrderEntry tradeOrderEntryValue">
               <div>
               <p class="detailEntryValue entryOpa ">TP Target</p>
               <p class="detailEntryValue entryOpa">Entry Target</p>
               </div>
        
               <div>
               <p class="detailEntryValueR viewPadd">1% <span class="viewHit">Hit</span> | 5% <span class="viewHit">Hit</span> | 10%</p>
               <p class="detailEntryValueR"> 40% | 20% | 30% </p>
               </div>
               </div>
        
        
               <div class="tradeOrderEntry tradeOrderEntryValue">
               <div>
               <p class="detailEntryValue entryOpa">Expire</p>
               </div>
        
               <div>
               <p class="detailEntryValueR viewPadd">Date - Time</p>
               </div>
                                </div>
        
        
              <div class="tradeOrderEntry tradeOrderEntryValue">
              <div>
              <p class="detailEntryValue entryOpa">Comment</p>
              </div>
        
             <div>
             <p class="detailEntryValueR viewPadd">Stop: 0.0009111</p>
             <p class="detailEntryValueR viewPadd">Minute: 0.000021</p>
             <p class="detailEntryValueR viewPadd">Current: 0.0002121</p>
             <p class="detailEntryValueR viewPadd">Profit: 0.97</p>
                </div>
             </div>
        
             <div class="tradeOrderEntryValue buttonsInfo">
             <button class="editedButton commonBtnStyle">
             <img src="img/edit-dropdown.png" />Edit</button>
                                    
               <button class="cancelledButton commonBtnStyle">
               <img src="img/cross1.png" />Cancel</button>
                                    
               <button class="resumedButton commonBtnStyle">
               <img src="img/pause-dropdown.png" />Pause/Resume</button>
                                    
               <button class="exittedButton commonBtnStyle">
               <img src="img/exitted.png" />Force Exit</button>
               
               </div>
                                
              </div>
        
              </div>
              </li>`

      html += htmlSegment;
    }
  });
  html += `</ul></div></div>`;

  let container = document.querySelector('.orders-details-info');
  container.innerHTML = html;

  function beautifiedDate(date) {
    let format = {
      month: 'numeric',
      day: 'numeric',
      hour: 'numeric',
      minute: 'numeric',
      second: 'numeric'
    };
    return new Date(date).toLocaleString('default', format);
  }