Javascript генератор строк массива с несколькими настройками?

Question

Я использую одну кнопку (функция 'newThing') для генерации одной строки массива за раз, которая отображается над кнопкой. Пользователь может выбрать, из какого массива вывести строку, используя переключатели справа, и они могут использовать переключатели слева, чтобы выбрать порядок, в котором генерируется каждый элемент. В предоставленном javascript, «mode1» - это случайная настройка, «mode2» - это старая-новая настройка, а «mode3» - это новая-старая настройка. Случайная настройка работает отлично, но я не смог понять, как сгенерировать элементы в определенном c порядке, используя два других режима. Что должно быть go под 'if (mode2.checked)' и 'if (mode3.checked)', чтобы отображалась по одной строке за раз в хронологическом порядке для mode2 и обратном хронологическом порядке для mode3?

function newThing() {
  window.scrollTo(0, 0);

  if (mode1.checked) {
    if (drawingCheck.checked) {
      var randomDrawing = Math.floor(Math.random() * (odddrawing.length));
      document.getElementById("thingDisplay").innerHTML = odddrawing[randomDrawing];
    }
    if (haikuCheck.checked) {
      var randomHaiku = Math.floor(Math.random() * (oddhaiku.length));
      document.getElementById("thingDisplay").innerHTML = oddhaiku[randomHaiku];
    }
  }
  if (mode2.checked) {
    if (drawingCheck.checked) {

    }
    if (haikuCheck.checked) {

    }
  }
  if (mode3.checked) {
    if (drawingCheck.checked) {

    }
    if (haikuCheck.checked) {

    }
  }
}

//drawing array
var odddrawing = [
  '<p>20191201 \<br> this is a drawing \<br> this is a drawing \<br> this is a drawing</p>',
  '<p>20191202 \<br> help help \<br> help help help \<br> help help help help</p>',
  '<p>20191203 \<br> go in order \<br> generate in order plz \<br> this is a drawing</p>'
]
//haiku array
var oddhaiku = [
  '<p>20191204_2249 \<br> this is a poem \<br> this is a poem \<br> this is a poem</p>',
  '<p>20191205_1206 \<br> this is a poem \<br> this is a poem \<br> this is a poem</p>',
  '<p>20191206_0816 <br> this is a poem \<br> this is a poem \<br> this is a poem</p>',
  '<p>20191207_1852 \<br> this is a poem \<br> this is a poem \<br> this is a poem</p>'
]

html {
  background-color: #111;
  font-family: sans-serif;
  scroll-behavior: smooth;
}


/*start checkbox design*/

input[type='radio'] {
  -webkit-appearance: button;
  width: 40px;
  height: 40px;
  background: #000;
  border-radius: 20px;
  border: 2px solid #555;
  cursor: pointer;
}

input[type='radio']:hover {
  background-color: #333;
  transition: 0.5s;
}

input[type='radio']:checked {
  background: #888;
  border: 2px solid #FFF;
  border-radius: 20px;
}

input {
  width: 13px;
  height: 13px;
  margin: 3px;
  top: 13px;
  position: relative;
}

label {
  padding-bottom: 35px;
}

#categories {
  user-select: none;
}

#mode {
  user-select: none;
}


/*end checkbox design*/


/*start new thing button*/

#button01 {
  color: #FFFFFF;
  font-size: 17px;
  background-color: #000;
  border-color: #888;
  border-width: 6px;
  width: 130px;
  height: 40px;
  cursor: pointer;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -20%);
}

#button01:hover {
  background-color: #333;
  transition: 0.2s;
}

#button01:active {
  background-color: #777;
  transition: 0.1s;
}


/*end new thing button*/

#thingDisplay {
  color: #FFFFFF;
  text-align: center;
  font-size: 170%;
}


/*start page container*/

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  height: 820px;
  padding-bottom: 10px;
}

.cell {
  color: white;
}

.cell-1 {
  /*display*/
  grid-row: 1;
  grid-column: 1/4;
  min-height: 580px;
  display: block;
  margin: 0 auto;
}

.cell-2 {
  /*button*/
  grid-row: 2;
  grid-column: 1/4;
  height: 50px;
  position: relative;
}

.cell-3 {
  /*mode*/
  grid-row: 3;
  grid-column: 1;
  user-select: none;
  position: relative;
  left: 0;
  bottom: 1%;
}

.cell-4 {
  /*blank, REMOVE*/
  grid-row: 3;
  grid-column: 2;
}

.cell-5 {
  /*categories*/
  grid-row: 3;
  grid-column: 3;
  position: relative;
  right: 0;
  bottom: 1%;
}

.cell-6 {
  grid-row: 4;
  grid-column: 1/4;
  height: 100px;
  padding-top: 60px;
}


/*end page container*/

form {
  color: #FFF;
}

button {
  position: absolute;
}

<div class="container">
  <div class="cell cell-1">
    <div align="center" id='thingDisplay'></div>
  </div>
  <div class="cell cell-2">
    <button class="box" id="button01" onclick="newThing()">New Thing</button>
  </div>
  <div class="cell cell-3">
    <form id="mode">
      <label><input type="radio" name="modes" id="mode1" checked="yes" /> Random </label>
      <br /><label><input type="radio" name="modes" id="mode2" /> Old - New </label>
      <br /><label><input type="radio" name="modes" id="mode3" /> New - Old </label>
    </form>
  </div>
  <div class="cell cell-5" align="right">
    <form id="categories">
      <label> Drawings <input type="radio" name="thing" id="drawingCheck" /></label>
      <br /><label> Haiku <input type="radio" name="thing" id="haikuCheck" /></label>
    </form>
  </div>
</div>

Использование одной кнопки