Здравствуйте, я хочу создать Динамические контент, но уже запутался, Задача было создать связанные списки в форме, а карточка зависеть от второго списка. Списки уже связал, но карточку не получается
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="stylesheet" href="style.css">
<title>Test</title>
</head>
<body>
<div class="main">
<!-- Form start -->
<form action="#" method="POST">
<div class="form">
<div class="sel">
<select name="s_section" id="s_section" class="s_section" required>
<option value="" disabled selected>Ընտրեք բաժինը</option>
<option value="barber">Վարսահարդարում</option>
<option value="manicure">Մատնահարդարում</option>
<option value="makeup">Մակիյաժ</option>
<option value="massage">Մերսում</option>
<option value="surgeon">Ասեղնաբուժություն</option>
</select>
</div>
<div class="sel">
<select name="s_employee" id="s_employee" class="s_employee" required>
<option value="" disabled selected>Ընտրեք աշխատակցին</option>
</select>
</div>
<div class="sel">
<input type="date" class="sel_date" title="Ընտրեք օրը" value="Ընտրեք օրը">
<input type="time" class="sel_time" title="Ընտրեք ժամը" value="Ընտրեք օրը">
</div>
<div class="times">
<span class="sp_time1">1</span>
<span class="sp_time2">2</span>
<span class="sp_time3">3</span>
<span class="sp_time4">4</span>
<span class="sp_time5">5</span>
<span class="sp_time6">6</span>
<span class="sp_time7">7</span>
<span class="sp_time8">8</span>
<span class="sp_time9">9</span>
<span class="sp_time10">10</span>
<span class="sp_time11">11</span>
<span class="sp_time12">12</span>
<span class="sp_time13">13</span>
<span class="sp_time14">14</span>
<span class="sp_time15">15</span>
<span class="sp_time16">16</span>
<span class="sp_time17">17</span>
<span class="sp_time18">18</span>
<span class="sp_time19">19</span>
<span class="sp_time20">20</span>
</div>
<input type="submit" value="Հաստատել">
</div>
</form>
<!-- Person_Card -->
<div class="person">
<div class="person_card" id="person_card">
<h3 class="person_name"></h3>
<p class="person_zag"></p>
<img src="" alt="person" class="person_img">
<p class="person_desc"></p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
var Armine_name = 'Արմինե Վարդանյան';
var Armine_zag = 'Վարսավիր';
var Armine_img = '2.jpg';
var Armine_desc = 'Armine Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Собрал, первую бросил речью прямо взгляд свой домах семь залетают страна буквенных что заманивший семантика, решила. Страну пояс ему жизни.';
var Armine = [Armine_name, Armine_zag, Armine_img, Armine_desc];
var Hovik_name = 'Հովիկ Ղամբարյան';
var Hovik_zag = 'Վարսավիր';
var Hovik_img = '1.jpg';
var Hovik_desc = 'Hovik Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Собрал, первую бросил речью прямо взгляд свой домах семь залетают страна буквенных что заманивший семантика, решила. Страну пояс ему жизни.';
var Hovik = [Hovik_name, Hovik_zag, Hovik_img, Hovik_desc];
var Karen_name = 'Կարեն Սարգսյան';
var Karen_zag = 'Վարսավիր';
var Karen_img = '3.jpg';
var Karen_desc = 'Karen Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Собрал, первую бросил речью прямо взгляд свой домах семь залетают страна буквенных что заманивший семантика, решила. Страну пояс ему жизни.';
var Karen = [Karen_name, Karen_zag, Karen_img, Karen_desc];
var Marine_name = 'Մարինե Հակոբյան';
var Marine_zag = 'Մատնահարդար';
var Marine_img = '2.jpg';
var Marine_desc = 'Մարինե Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Собрал, первую бросил речью прямо взгляд свой домах семь залетают страна буквенных что заманивший семантика, решила. Страну пояс ему жизни.';
var Marine = [Marine_name, Marine_zag, Marine_img, Marine_desc];
var Satenik_name = 'Սատենիկ Սաղաթելյան';
var Satenik_zag = 'Մատնահարդար';
var Satenik_img = '1.jpg';
var Satenik_desc = 'Սատենիկ Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Собрал, первую бросил речью прямо взгляд свой домах семь залетают страна буквенных что заманивший семантика, решила. Страну пояс ему жизни.';
var Satenik = [Satenik_name, Satenik_zag, Satenik_img, Satenik_desc];
var Gayane_name = 'Գայանե Մելքոնըան';
var Gayane_zag = 'Դիմահարդար';
var Gayane_img = '3.jpg';
var Gayane_desc = 'Գայանե Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Собрал, первую бросил речью прямо взгляд свой домах семь залетают страна буквенных что заманивший семантика, решила. Страну пояс ему жизни.';
var Gayane = [Gayane_name, Gayane_zag, Gayane_img, Gayane_desc];
var Satenik_k_name = 'Սաթենիկ Կիրակոսյան';
var Satenik_k_zag = 'Դիմահարդար';
var Satenik_k_img = '2.jpg';
var Satenik_k_desc = 'Սաթենիկ Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Собрал, первую бросил речью прямо взгляд свой домах семь залетают страна буквенных что заманивший семантика, решила. Страну пояс ему жизни.';
var Satenik_k = [Satenik_k_name, Satenik_k_zag, Satenik_k_img, Satenik_k_desc];
var Artak_name = 'Արտակ Սարգսյան';
var Artak_zag = 'Ասեղնաբույժ';
var Artak_img = '1.jpg';
var Artak_desc = 'Արտակ Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Собрал, первую бросил речью прямо взгляд свой домах семь залетают страна буквенных что заманивший семантика, решила. Страну пояс ему жизни.';
var Artak = [Artak_name, Artak_zag, Artak_img, Artak_desc];
var Karine_name = 'Կարինե Մարգարյան';
var Karine_zag = 'Մերսող';
var Karine_img = '3.jpg';
var Karine_desc = 'Կարինե Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Собрал, первую бросил речью прямо взгляд свой домах семь залетают страна буквенных что заманивший семантика, решила. Страну пояс ему жизни.';
var Karine = [Karine_name, Karine_zag, Karine_img, Karine_desc];
var special = {
barber: ['Ընտրեք Աշխատակցին', Armine[0], Hovik[0], Karen[0]],
manicure:['Ընտրեք Աշխատակցին', Marine[0], Satenik[0] ],
makeup: ['Ընտրեք Աշխատակցին', Gayane[0], Satenik_k[0] ],
surgeon: ['Ընտրեք Աշխատակցին', Artak[0] ],
massage: ['Ընտրեք Աշխատակցին', Karine[0] ]
};
var specialist = document.getElementById('s_section');
var person = document.querySelector('#s_employee');
window.onload = selectPerson;
specialist.onchange = selectPerson;
function selectPerson(ev) {
person.innerHTML ="";
var c = this.value || 'barber', o;
for (let i = 0; i < special[c].length; i++) {
o = new Option(special[c][i],i,false,false);
person.add(o);
$("#s_employee option:first").prop("disabled", true).attr({value: ""});
};
};
var card_add = {
name: [Armine_name, Hovik_name, Karen_name, Marine_name, Satenik_name, Gayane_name, Satenik_k_name, Artak_name, Karine_name],
zag: [Armine_zag, Hovik_zag, Karen_zag, Marine_zag, Satenik_zag, Gayane_zag, Satenik_k_zag, Artak_zag, Karine_zag],
img: [Armine_img, Hovik_img, Karen_img, Marine_img, Satenik_img, Gayane_img, Satenik_k_img, Artak_img, Karine_img],
desc: [Armine_desc, Hovik_desc, Karen_desc, Marine_desc, Satenik_desc, Gayane_desc, Satenik_k_desc, Artak_desc, Karine_desc]
};
var cart = $('.person_card');
var child = cart[0].children;
// console.log (child[0]);
//child[0].html('klop');
for (var i = 0; i < child.length; i++) {
console.log(child[i]);
};
$('.person_name').html(Armine[0]);
$('.person_zag').html(Armine[1]);
$('.person_img').attr({src: Armine[2]});
$('.person_desc').html(Armine[3]);
body{
margin: 0;
padding: 0;
background: #C1C6D8;
min-height: 1000px;
}
.main{
margin: 0 auto;
width: 600px;
display: flex;
justify-content: space-between;
}
.sel select {
padding: 8px;
outline: none;
}
.sel input {
padding: 5px;
}
.person{
background: #DCDDDD;
max-width: 310px;
padding: 20px 10px;
}
.person_card{
text-align: center;
border:1px solid #000;
}