维护排序的jQuery手风琴

Question

我遇到的情况是，随着时间的推移，我会收到某些事件，每个事件都有与之相关的时间戳。我将其放入按日期标记的Jquery手风琴部分。它的工作原理是，除了我希望将手风琴节按降序排列外，即最近的日期在顶部，而属于该日期的事件进入该节。这是我到目前为止所拥有的完整代码，目前，我只是在末尾附加一个新日期。如何插入以便对其进行排序？

$(function() {
  $("#accordion").accordion({
    collapsible: true
  });
});

function getRandInt(max) {
  return Math.floor(Math.random() * Math.floor(max))
}

function getRandomTime() {
  var t = ['AM', 'PM']
  var hr = getRandInt(13);
  var mn = getRandInt(60);
  var sec = getRandInt(60);
  var ampm = t[Math.floor(Math.random() * 2)]
  return (hr + ':' + mn + ':' + sec + " " + ampm);
}

function getRandomDate() {

  var month = getRandInt(13);
  var day = getRandInt(28);
  return ('2018-' + month + '-' + day);
}

function getRandomEvent() {
  var events = ['General Event', 'Random', 'Splash', 'Car crash', 'Touchdown', 'Rain', 'Snow'];
  var rand = events[Math.floor(Math.random() * events.length)];
  return rand;
}

function getRandomSection(sections) {
  var rand = sections[Math.floor(Math.random() * sections.length)];
  return rand;
}

function getPopupDivId(t, e, d) {
  var popup_div_str = t + e;
  var popup_div_id = popup_div_str.replace(/\s{1,}/g, "");
  popup_div_id = popup_div_id.replace(/:/g, "");
  return popup_div_id;
}

function getDescriptiveDate(dateStr) {
  var d_t = dateStr.split("T");
  var timeStr = d_t[0] + " " + d_t[1];
  console.log(timeStr);
  var date = new Date(timeStr + ' UTC');
  return "Event time: " + date.toString()
}

function makeTable(eventDetails) {
  var d = getDescriptiveDate("2018-11-07T00:49:05");

  var popupStr = d + '<br>' + '<table border="1"><tr><th>Parameter Name</th><th>Value</th></tr>';
  var data = JSON.parse(eventDetails);
  var startTag = '<tr><td>';
  var endTag = '</td>';
  var rowEnd = '</tr>'

  for (var key in data) {
    popupStr += (startTag + key + endTag + '<td>' + data[key] + endTag + rowEnd);
  }
  return popupStr + '</table>';

}
var currentDialog = '';

function setPopupDiv(t, e, d, popup_div_id) {
  var table = makeTable('{"Temp": 24, "WindChill": "14", "Dew point": 10}');
  var popup_div = '<div id="dialog' + popup_div_id + '\" ' + 'style="display:none">' + table + '</div>';

  console.log("setPopupDiv: popup div: " + popup_div);
  $('.' + d).append(popup_div);

  $('#' + popup_div_id).click(function() {
    $(function() {
      if (currentDialog == '') {
        currentDialog = "#dialog" + popup_div_id;
      } else {
        console.log('closing dialog' + currentDialog);
        $(currentDialog).dialog('close');
        currentDialog = "#dialog" + popup_div_id;
      }
      $("#dialog" + popup_div_id).dialog();
      $("#dialog" + popup_div_id).dialog('open');
    });
    console.log("dialog link click");

    return false;
  });
}

/* "Create new accordion" button handler */
function addData() {
  var d = getRandomDate();
  var e = getRandomEvent();
  var t = getRandomTime();
  var popup_div_id = getPopupDivId(t, e, d);
  var ev = '<a href="" id=\"' + popup_div_id + '\">' + t + ' ' + '</a>' + e;
  var section = '<h3>' + d + '</h3>';
  var dom_element = section + '<div>' + '<ul class=\"' + d + '\">' + '<li>' + ev + '</li></ul>' + '</div>';
  $('#accordion').append(dom_element)
    .accordion('destroy').accordion({
      collapsible: true
    });
  setPopupDiv(t, e, d, popup_div_id);
  console.log("addData(): " + dom_element);
  var e2 = getRandomEvent();
  var t2 = getRandomTime();
  popup_div_id = getPopupDivId(t2, e2, d);

  var ev2 = '<li>' + '<a href="" id=\"' + popup_div_id + '\">' + t2 + ' ' + '</a>' + e2 + '</li>';
  $('.' + d).append(ev2);
  setPopupDiv(t2, e2, d, popup_div_id);

}

function addDataActual(eventDate, eventTime, eventType) {
  var popup_div_id = getPopupDivId(eventTime, eventType, eventDate);
  var evt = '<a href="" id=\"' + popup_div_id + '\">' + eventTime + ' ' + '</a>' + eventType;
  var section = '<h3>' + eventDate + '</h3>';
  var dom_element = section + '<div>' + '<ul class=\"' + eventDate + '\">' + '<li>' + evt + '</li></ul>' + '</div>';

  var arrayOfClassNames = $("#accordion *").map(function() {
    if ($(this).attr('class')) {
      if ($(this)[0].nodeName == 'UL') {
        if (this.className == eventDate) {
          return this.className;
        }
      }
    }
  }).get();
  if (arrayOfClassNames.length == 0) {

    /* New section */

    $('#accordion').append(dom_element)
      .accordion('destroy').accordion({
        collapsible: true
      });
    setPopupDiv(eventTime, eventType, eventDate, popup_div_id);
    console.log(dom_element);
  } else {
    /* Exists already*/
    d = arrayOfClassNames[0];
    popup_div_id = getPopupDivId(eventTime, eventType, d);

    var eventToAppend = '<li>' + '<a href="" id=\"' + popup_div_id + '\">' + eventTime + ' ' + '</a>' + eventType + '</li>';
    $('.' + d).append(eventToAppend);
    setPopupDiv(eventTime, eventType, d, popup_div_id);
  }

}

function addDataOrNew() {
  var arrayOfClassNames = $("#accordion *").map(function() {
    if ($(this).attr('class')) {
      if ($(this)[0].nodeName == 'UL') {
        return this.className;
      }
    }
  }).get();

  var toss = getRandInt(2);
  if (toss == 0) {

    var d = getRandomSection(arrayOfClassNames);
    console.log("toss returned 0, adding to existing section " + d);
    console.log("Chosen one to add to:" + d);
    var e = getRandomEvent();
    var t = getRandomTime();
    addDataActual(d, t, e);
  } else {

    var d = getRandomDate();
    console.log("toss returned 1, adding a new section " + d);
    var e = getRandomEvent();
    var t = getRandomTime();
    addDataActual(d, t, e);
  }
}

function addDataToRandomSection() {
  var e = getRandomEvent();
  var t = getRandomTime();

  var arrayOfClassNames = $("#accordion *").map(function() {
    if ($(this).attr('class')) {
      if ($(this)[0].nodeName == 'UL') {
        return this.className;
      }
    }
  }).get();
  console.log(arrayOfClassNames);
  d = getRandomSection(arrayOfClassNames);
  console.log("Chosen one:" + d);
  var e2 = getRandomEvent();
  var t2 = getRandomTime();
  var popup_div_id = getPopupDivId(t2, e2, d);

  var ev2 = '<li>' + '<a href="" id=\"' + popup_div_id + '\">' + t2 + ' ' + '</a>' + e2 + '</li>'
  $('.' + d).append(ev2);
  setPopupDiv(t2, e2, d, popup_div_id);
}

function addDataToTopSection() {
  var e2 = getRandomEvent();
  var t2 = getRandomTime();

  var arrayOfClassNames = $("#accordion *").map(function() {
    if ($(this).attr('class')) {
      if ($(this)[0].nodeName == 'UL') {
        return this.className;
      }
    }
  }).get();
  d = arrayOfClassNames[0];
  var popup_div_id = getPopupDivId(t2, e2, d);
  setPopupDiv(t2, e2, d, popup_div_id);
  var ev2 = '<li>' + '<a href="" id=\"' + popup_div_id + '\">' + t2 + ' ' + '</a>' + e2 + '</li>'
  $('.' + d).append(ev2);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href='https://code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css' rel='stylesheet'>
<!doctype html>

<button onclick="addData()" class="regular">Create new Accordion</button>
<button onclick="addDataToRandomSection()" class="regular">Add data to random section</button>
<button onclick="addDataOrNew()" class="regular">Add new section or append to existing</button>
<fieldset id="patient-event-list">
  <legend>Event History</legend>
  <div id="eventinfo-body">
    <button type="button" id="more" onclick="addDataToTopSection()">More history</button>
  </div>
  <div id="accordion" class="accordion">
  </div>
</fieldset>