JSFiddle - React, Tailwind, and code Playground

by MihayNagy

HTML

//Вот ета кнопка не работает адекватно   <div class="two" id="domainBefore">
                 		<div class="two-wrap tagthree">               			
                 			<p class="personalization-wrapper__left__content__url__field__label">Сайт</p>
											<input 	
													style="margin-bottom: 0;" 
													placeholder="domain.ru" 
													id="inputDomain" 	
													name="website_inp"
													class="personalization-wrapper__left__content__url__field__input">                 	
                 		</div>
                 		<div class="two-wrap btn-right">
                 			<button class="qr-download__button tagthree" id="addDomain" type="button">
															<div style="background-image:none" class="qr-download__button__ico">+</div>
															<p class="qr-download__button__text">Добавить сайт</p>
											</button>
                 		</div>	
								</div>		
                
                
                		//здесь кнопка которая работает нормально		<div class="two" id="phoneBefore">
													<div class="two-wrap tag">
														<p
															class="personalization-wrapper__left__content__url__field__label">
															Эл. почта
														</p>
														<input id="inputEmail" style="margin-bottom: 0;" name="email1"
															class="personalization-wrapper__left__content__url__field__input">
													</div>
													<div class="two-wrap btn-right">
														<button class="qr-download__button tag" id="addEmail" type="button">
															<div style="background-image:none"
																class="qr-download__button__ico">+</div>
															<p class="qr-download__button__text">Добавить эл. почту</p>
														</button>
													</div>
												</div>

JavaScript

let phones = 1;
let emails = 1;
let domains = 1;



		
    this.phones = 1;
   	 this.emails = 1;
    this.domains = 1;




addInfo = () => {
    const parent = document.querySelector(
      ".personalization-wrapper__left__content__menu__item__info__right"
    );

    const parentMobile = document.querySelector(
      ".personalization-wrapper__right__container__preview__info"
    );

    const mobilePhoneBefore = document.getElementById("mobilePhoneBefore");
    const mobileEmailBefore = document.getElementById("mobileEmailBefore");
    const mobileDomainBefore = document.getElementById("mobileDomainBefore")


    const addPhone = document.getElementById("addPhone");
    const addEmail = document.getElementById("addEmail");
    const addDomain = document.getElementById("addDomain")


    const phoneBefore = document.getElementById("phoneBefore");
    const emailBefore = document.getElementById("emailBefore");
    const domainBefore = document.getElementById("domainBefore")




	вот здесь не работает нормально, там ниже есть та которая нормально работет 
  addDomain.addEventListener("click", (e) => {
      const domain = document.createElement("div");
      domain.classList.add("two");
      domain.innerHTML =
        "<div class='two-wrap tagthree'><p class='personalization-wrapper__left__content__url__field__label'>Сайт</p><input style='margin-bottom: 0;' class='personalization-wrapper__left__content__url__field__input'></div>";

      const mobileDomain = document.createElement("div");
      mobileDomain.classList.add(
        "personalization-wrapper__right__container__preview__contact"
      );
      mobileDomain.style.marginTop = "20px";

      mobileDomain.innerHTML =
        "<img src='./../assets/images/web.svg'><div class='personalization-wrapper__right__container__preview__contact__block'><p class='personalization-wrapper__right__container__preview__contact__block__up'>Сайт</p><p...