Как вывести данные в отдельных блоках?

Question

dexr0w @dexr0w

Как вывести данные в отдельных блоках?

В общем есть форма "Расписание".
И при нажатии на "Добавить" данные которые мы ввели внутри и выбирали сохраняются в массиве.
При нажатии на Показать Расписание , показываются данные которые мы ввели в одном блоке.

Вопрос:

Как сделать так чтобы данные выводились не в одном блоке, а по отдельности?
Ибо данные слипаются вместе и выглядит это очень не аккуратно.

Код:

<div class="container custom__container__header">
                	<div class="row justify-content-center">
                		<form id="myForm">
                		 <div class="col-4">
                		 	<h1 class="white_h1">Расписание</h1>
    					  <span class="white_span">День недели: </span><select name="select"  id="day">
    						<option>Понедельник</option>
    						<option>Вторник</option>
    						<option>Среда</option>
    						<option>Четверг</option>
    						<option>Пятница</option>
    					</select>
                		 </div>
                		 <div class="col-4 pt-4">
                		 	 <span class="white_span">Время: </span><select name="select" id="time">
    						<option>09:00</option>
    						<option>10:00</option>
    						<option>11:00</option>
    						<option>12:00</option>
    						<option>13:00</option>
    						<option>14:00</option>
    						<option>15:00</option>
    						<option>16:00</option>
    					</select>
                		 </div>
                		<div class="col-4 pt-4">
                		 <span class="white_span">Приоритет</span><select name="" id="priory">
    						<option>не важный</option>
    						<option>важный</option>
    						<option>очень важный</option>
    					</select>
                		 </div>
                		 <div class="col-4 pt-4">
                		 	<textarea placeholder="Напишите название урока....."  cols="42" rows="6" id="textArea"></textarea> 
                		 </div>
                		</form>
                		<div class="col">
                		 <button class="blue__btn" id="addInfo" onclick="myFunction()">Добавить</button>
    					 <button class="green__btn" id="getInfo" onclick="myFunctional()">Показать расписание</button>
    					</div>
                	</div>
                	<div class="col pt-4">
                		<div id="response"></div>
                	</div>
                </div>

const getInfo = document.getElementById('getInfo');

getInfo.addEventListener('click', function() {
  const day = document.getElementById('day');
  const time = document.getElementById('time');
  const priory = document.getElementById('priory')
  const textArea = document.getElementById('textArea');
});
//данные getElementById(...).



const addInfo = [];





function myFunction() {
  console.log(addInfo);
  addInfo.push(day.value);
  addInfo.push(time.value);
  addInfo.push(priory.value);
  addInfo.push(textArea.value);
  document.getElementById("myForm").reset();
}
//функция push().


function myFunctional() {
  document.getElementById('response').innerHTML = (addInfo);
    addInfo.forEach(function(item, index, arr) {
    console.log(item);
  })
  response.style.backgroundColor = "yellow";
  response.style.borderRadius = "5px";
}

//функция которая выводит данные.

#body_container {
	background: #241571;
	background-size: cover;
	height: auto;
}



.custom__container__header {
	padding-top: 100px;
}

.blue__btn { 
	width: 100px;
	height: 45px;
	background: #157dec;
	color: #fff;
	border: none;
	cursor: pointer;
}


.green__btn {
	width: 200px;
	height: 45px;
	background: #03ac13;
	color: #fff;
	border: none;
	cursor: pointer;
}

.white_h1 {
	color: #fff;
}

.white_span {
	color: #fff;
}



#response { 
  color: #000;
  width: 600px;
  height: 70px;
}