Настройка профиля пользователя

[iamrewqaz 0]

<div id="tsoc1">Название[xfinput_soc1]Cсылка[xfinput_soc1l]</div>
<input type="button" id="kn1" value="Еще" onmousedown="viewDiv1()">
<div id="tsoc2">Название[xfinput_soc2]Cсылка[xfinput_soc2l]</div>
<input type="button" id="kn2" value="Еще" onmousedown="viewDiv2()">
<div id="tsoc3">Название[xfinput_soc3]Cсылка[xfinput_soc3l]</div>
<input type="button" id="kn3" value="Ещё" onmousedown="viewDiv3()">
<div id="tsoc4">Название[xfinput_soc4]Cсылка[xfinput_soc4l]</div>
<input type="button" id="kn4" value="Еще" onmousedown="viewDiv4()">
<div id="tsoc5">Название[xfinput_soc5]Cсылка[xfinput_soc5l]</div>
<input type="button" id="kn5" value="Еще" onmousedown="viewDiv5()">
<div id="tsoc6">Название[xfinput_soc6]Cсылка[xfinput_soc6l]</div>
<input type="button" id="kn6" value="Еще" onmousedown="viewDiv6()">
<div id="tsoc7">Название[xfinput_soc7]Cсылка[xfinput_soc7l]</div>
<input type="button" id="kn7" value="Еще" onmousedown="viewDiv7()">
<div id="tsoc8">Название[xfinput_soc8]Cсылка[xfinput_soc8l]</div>
<input type="button" id="kn8" value="Еще" onmousedown="viewDiv8()">
<div id="tsoc9">Название[xfinput_soc9]Cсылка[xfinput_soc9l]</div>
<input type="button" id="kn9" value="Еще" onmousedown="viewDiv9()">
<div id="tsoc10">Название[xfinput_soc10]Cсылка[xfinput_soc10l]</div>


<p></p>
<button class="button-8" id="but1"> <a href="[xfgiven_soc1l][xfvalue_soc1l][/xfgiven_soc1l]">[xfgiven_soc1][xfvalue_soc1][/xfgiven_soc1]</button>
   <button class="button-8"  id="but2"> <a href="[xfgiven_soc2l][xfvalue_soc2l][/xfgiven_soc2l]">[xfgiven_soc2][xfvalue_soc2][/xfgiven_soc2]</button>
   <button class="button-8"  id="but3"> <a href="[xfgiven_soc3l][xfvalue_soc3l][/xfgiven_soc3l]">[xfgiven_soc3][xfvalue_soc3][/xfgiven_soc3]</button>
   <button class="button-8"  id="but4"> <a href="[xfgiven_soc4l][xfvalue_soc4l][/xfgiven_soc4l]">[xfgiven_soc4][xfvalue_soc4][/xfgiven_soc4]</button>
<button class="button-8" id="but5"> <a href="[xfgiven_soc5l][xfvalue_soc5l][/xfgiven_soc5l]">[xfgiven_soc5][xfvalue_soc5][/xfgiven_soc5]</button>
   <button class="button-8"  id="but6"> <a href="[xfgiven_soc6l][xfvalue_soc6l][/xfgiven_soc6l]">[xfgiven_soc6][xfvalue_soc6][/xfgiven_soc6]</button>
   <button class="button-8"  id="but7"> <a href="[xfgiven_soc7l][xfvalue_soc7l][/xfgiven_soc7l]">[xfgiven_soc7][xfvalue_soc7][/xfgiven_soc7]</button>
   <button class="button-8"  id="but8"> <a href="[xfgiven_soc8l][xfvalue_soc8l][/xfgiven_soc8l]">[xfgiven_soc8][xfvalue_soc8][/xfgiven_soc8]</button>
   <button class="button-8"  id="but9"> <a href="[xfgiven_soc9l][xfvalue_soc9l][/xfgiven_soc9l]">[xfgiven_soc9][xfvalue_soc9][/xfgiven_soc9]</button>
   <button class="button-8"  id="but10"> <a href="[xfgiven_soc10l][xfvalue_soc10l][/xfgiven_soc10l]">[xfgiven_soc10][xfvalue_soc10][/xfgiven_soc10]</button>

#kn2{
  display: none;
}
#kn3{
  display: none;
}
#kn4{
  display: none;
}
#kn5{
  display: none;
}
#kn6{
  display: none;
}
#kn7{
  display: none;
}
#kn8{
  display: none;
}
#kn9{
  display: none;
}
#tsoc2{
  display: none;
}
#tsoc3{
  display: none;
}
#tsoc4{
  display: none;
}
#tsoc5{
  display: none;
}

#tsoc6{
  display: none;
}
#tsoc7{
  display: none;
}
#tsoc8{
  display: none;
}

#tsoc9{
  display: none;
}
#tsoc10{
  display: none;
}
#but2{
  display: none;
}
#but3{
  display: none;
}
#but4{
  display: none;
}
#but5{
  display: none;
}
#but6{
  display: none;
}
#but7{
  display: none;
}
#but8{
  display: none;
}
#but9{
  display: none;
}
#but10{
  display: none;
}

function viewDiv1(){
  document.getElementById("kn2").style.display = "block";
document.getElementById("but2").style.display = "inline-block";
document.getElementById("tsoc2").style.display = "inline-block";
  document.getElementById("kn1").style.display = "none";
};

function viewDiv2(){
  document.getElementById("tsoc3").style.display = "block";
document.getElementById("kn3").style.display = "inline-block";
  document.getElementById("but3").style.display = "inline-block";
document.getElementById("kn2").style.display = "none";
};

function viewDiv3(){
  document.getElementById("tsoc4").style.display = "block";
document.getElementById("kn4").style.display = "inline-block";
    document.getElementById("but4").style.display = "inline-block";
document.getElementById("kn3").style.display = "none";
};

function viewDiv4(){
  document.getElementById("tsoc5").style.display = "block";
document.getElementById("kn5").style.display = "inline-block";
    document.getElementById("but5").style.display = "inline-block";
document.getElementById("kn4").style.display = "none";
    };

function viewDiv5(){
  document.getElementById("tsoc6").style.display = "block";
document.getElementById("kn6").style.display = "inline-block";
document.getElementById("but6").style.display = "inline-block";
document.getElementById("kn5").style.display = "none";
};

function viewDiv6(){
  document.getElementById("tsoc7").style.display = "block";
document.getElementById("kn7").style.display = "inline-block";
  document.getElementById("but7").style.display = "inline-block";
document.getElementById("kn6").style.display = "none";
};

function viewDiv7(){
  document.getElementById("tsoc8").style.display = "block";
document.getElementById("kn8").style.display = "inline-block";
    document.getElementById("but8").style.display = "inline-block";
document.getElementById("kn7").style.display = "none";
    };

function viewDiv8(){
  document.getElementById("tsoc9").style.display = "block";
document.getElementById("kn9").style.display = "inline-block";
    document.getElementById("but9").style.display = "inline-block";
document.getElementById("kn8").style.display = "none";
};

function viewDiv9(){
  document.getElementById("tsoc10").style.display = "block";
document.getElementById("but10").style.display = "inline-block";
document.getElementById("kn9").style.display = "none";
    };

Не подскажите, как мне сделать, чтобы в настройках профиля пользователя показалось "tsoc1" и рядом кнопка "еще" ("kn1), чтобы при нажатии на эту кнопку под "tsoc1" появился "tsoc2" и в профиле пользователя появился кнопка "but2", также чтобы кнопка "kn1" исчез, а рядом с "tsoc2" появился кнопка "kn2"..... так до конца. Я написал это всё в css и js. всё работает, но когда нажимаю кнопку сохранить внизу страницы настройки профиля пользователя, всё обратно исчезает. Как мне это решить?

http://donocard.ru/user/Sherov/

Изменено 5 декабря 2022 пользователем iamrewqaz