Динамическое добавление полей формы при нажатии кнопки в css структуре сетки

Question

У меня есть CSS структура сетки, где у меня уже есть несколько полей формы, и я добавил кнопку добавления, и при нажатии на нее необходимо добавить набор полей формы.

<div class="network-sub-form2">
      <div class="desc-btn">
        <label class="label revert btn-label vertical-alignment">AZ 2<sup class="star">*</sup></label>
        <button class="addButton btn-add-container button-revert vertical-alignment">
          <p class="add-desc">Add</p>
          <div class="add-btn">+</div>
        </button>
      </div>
      <select class="select-input" id="type" name="Type">
        <option>AWS</option>
        <option>option 2</option>
        <option>option3</option>
      </select>
      <div class="vertical-alignment">
         <div class="network-line-style"></div>
      </div>
      <div class="desc-btn">
        <label class="label revert btn-label vertical-alignment">Subnet 1<sup class="star">*</sup></label>
        <button class="addButton btn-add-container button-revert vertical-alignment">
            <p class="add-desc">Add</p>
            <div class="add-btn">+</div>
        </button>
      </div>
      <input type="text" class="form-input">  
      <div class="radio-group">  
        <label class="label"><input type="radio">Public</label>
        <label class="label odd-radio"><input type="radio">Private</label>
      </div>
      <label class="label revert btn-label vertical-alignment">CIDR<sup class="star">*</sup></label>
      <select class="select-input" id="type" name="Type">
        <option>AWS</option>
        <option>option 2</option>
        <option>option3</option>
      </select>    ```

это Css я использую

.formfields-network{
  display: grid;
  grid-template-columns: repeat(15,1fr);
  grid-auto-rows:1fr;
}

.network-heading{
  grid-column: 3/5;
  grid-row:2/3; 
  display: flex;
  justify-content: flex-start;
  align-items:center;
  text-align: left;
font-size: 20px;
font-weight:600;
letter-spacing: 0;
color: #333333;
opacity: 1;
}

.line-center{
  display: flex;
  align-items: center;
  grid-column:3/14;
  grid-row:3/4;
}
.network-line{
  border: 1px solid #DDDDDD;
  height: 1px;
  background: #666;
  opacity: 0.6;
  width: 100%;
}

.group1{
  grid-row: 4/17;
  grid-column: 3/14;
  display: grid;  
  grid-row-gap: 10px;
}

.input-button{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
}

.flex{
  flex: 5;

}

.button-container{


  align-items: flex-end;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;

}

.add-button{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin: auto;
  border: 1px solid #F08520;
}

.circle{
  color: #F08520;
}

.flex-labels{
  display: flex;
  flex-direction: row;
}

.left-label{
 flex: 1;
 align-self: flex-start
}

.right-label{
 flex: 1;
 align-self: flex-start;
}



.form-input-2{
  height: 45px;
 background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #DDDDDD;
opacity: 1;
border-radius: 4px;
color: #AAAAAA;

}



.left-input{
  flex:1;
  align-self: flex-start;

}

.right-input{
  flex:1;
  align-self: flex-end;

}

.gap{
  width: 30px;
}

.line-center1{
  grid-row:18/19;
  grid-column:3/14;
  display: flex;
  align-items: center;
}

.vpc1{
  grid-row: 19/20;
  grid-column: 3/6;
}

.group2{
  grid-column: 3/14;
  grid-row: 20/32;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr  ;
  grid-auto-rows: 30px;
  background: #F7F7F7 0% 0% no-repeat padding-box;
  border-radius: 3px;
  grid-row-gap:5px;
}

.az1{
  grid-column:2/6;
  grid-row: 2/3;
  align-items: center;
  justify-content: flex-start;

}

.flex1{
  flex:4;
}

.az1-inputselect{
  grid-column: 2/6;
  grid-row: 3/4;
 height:33px;
}
.az1-line{
  grid-row: 4/5;
  grid-column: 2/6;
  opacity:0.6 ;
}
.az1-subnet{
  grid-row: 5/6;
  grid-column: 2/6;
  align-items: center;
  justify-content: flex-start;
}

.subnet-input{
  grid-row:6/7;
  grid-column:2/6;
  height:33px;
}

.radio-button{
  grid-row:7/8;
  grid-column: 2/6;
  display: flex;
  align-items: center;
  justify-content:flex-start;
}

.radio-label{
  letter-spacing: 0;
color: #333333;
opacity: 1;
font-size:14px;
margin-right: 5px;
}

.cidr{
  grid-row:8/9;
  grid-column: 2/6;
}

.cidr-inputselect{
  grid-row:9/10;
  grid-column:2/6; 
}

.line2{
  grid-row: 33/34;
  grid-column: 3/14;
}

.vpc2{
  grid-row:34/35;
  grid-column: 3/6; 
}

.group3{
  grid-column: 3/14;
  grid-row: 35/47;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr  ;
  grid-auto-rows: 30px;
  background: #F7F7F7 0% 0% no-repeat padding-box;
  border-radius: 3px;
  grid-row-gap:5px;
}



.end-gap{
  grid-row:50/52;
  grid-column:1/17; 
  height:45px;
}

.endbtn{
  grid-row:47/50;
  grid-column:11/14;
  display: flex;
  justify-content: center;
  align-items: center;
}

на самом деле Проблема, с которой я сталкиваюсь, заключается в том, что у меня есть форма, представляющая собой сетку css, и я размещаю все поля в соответствующем порядке, и предположим, что, скажем, у меня есть кнопка «Добавить», например, в поле 5, и при нажатии на нее следует добавить метку и ввод текста. Способ решения этой проблемы, о котором я думаю, заключается в добавлении пустого div под полем, и событие onclick динамически добавляет немного html в этот div, но это приводит к поломке css. Любые предложения о том, как сделать это правильно и в целом, как правильно использовать сетку css, чтобы можно было добавлять динамический контент c.