Не отправляются поля, которые добавлены в форму средствами js

При отправки формы, передаются только те поля, которые были в форме. Те же поля которые добавились js-ом не передаются, как мне их получить?

Форма

<form action="/" method="post" id="my-form" xl-form>
    <div class="parent_inp">
         <label for="name_ru">Название</label>
         <input type="text" name="name_ru" placeholder="Вес"  value="">      
         <div class="parent_inp">
              <a class="link_btn green" id="addparam">Добавить параметр</a>
         </div> 
         </div>
         <div class="parent_inp" id="add_foot">  
              <label for="name_ru">Параметры</label>
         </div>
         <div class="parent_btn">
              <button class="crm_button blue" name="red_har_save" value="go">Сохранить</button>
         </div>
     </div>  
</form>

JS

<script>
   var i = 1;
   document.getElementById("addparam").addEventListener("click", function() {
       const el1 = document.createElement("label");
       el1.for = "name"+i;
       const el = document.createElement("input");
       el.className = "param"+i;
       el.placeholder = "name"+i;
       el.id = "name"+i;
        
       const form = document.getElementById("add_foot");
       form.appendChild(el);
       form.appendChild(el1);
       i = i + 1;
    })
</script>  

Добавляю любое количество полей кнопкой добавить, поля отображаются, но при нажатие на сохранить получаю следующий результат:

<?php var_dump($_POST);?>

array(2) { ["name_ru"]=> string(12) "Цвета11" ["red_har_save"]=> string(2) "go" }

т.е. поля которые были первоначально отправляются, а вот добавленые js-ом нет.