Javascript 向字段中添加数据，只发送后者

在表单中，动态添加了两种类型的字段，只有在最后一个字段中输入的字段才会在输入数据后发送。结果是将X和Y值相互混合

例如：我将第一组字段x1、x2、x3添加到第二组y1、y2，在绘图后，我得到y1:y2，而不是x1:y1、x2:y1、x3:y2等。 我做错了什么

以下是我的js代码：

function addDivFormX(){
    var newDiv = document.createElement("div");
    newDiv.className= 'form-group form-filed horizontal';   

    var input=document.createElement("input");
    input.placeholder='Enter X value';
    input.type='text';
    input.className='input';
    input.autocomplete='off';
    input.name= 'valX';
    input.required=true;
    input.addEventListener("keypress",validate);
    input.addEventListener("keydown", pressEnter);

    newDiv.appendChild(input);
    var parentDiv = document.getElementById("parent");
    parentDiv.appendChild(newDiv);
    input.focus();
  }

对于变量Y，它是类似的，相应的值发生了变化

从form.blade开始：

<form method="post" id="form" action="{{route('randomizeVar.store')}}" name="form" 
                class="form text-center" data-response-message-animation="slide-in-left" novalidate>
                   @csrf
                    <div id="parent" class="list-group">
                        <div class="form-group form-filed horizontal">
                            <input name="valX" class="input" type="text" autocomplete="off" 
                            placeholder="Enter X value"  autofocus onkeypress='validate(event)' 
                            onkeydown="pressEnter(event)" required>
                        </div>
                    </div>
                    <div id="parent" class="list-group">
                        <div class="form-group form-filed horizontal">
                            <input name="valY" class="input" type="text" autocomplete="off" 
                            placeholder="Enter Y value"  autofocus onkeypress='validate(event)' 
                            onkeydown="pressEnter(event)" required>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-lg btn-alternate align-center">Draw</button>                   
                </form>

@csrf
画

这是因为输入使用相同的

名称

属性。要解决此问题，必须通过将名称设置为

valX[]

和

valY[]

来指示数据是多个的

function addDivFormX(){
 ...
 input.name= 'valX[]';
 ...
}

---

不幸的是，经过几次更改后，问题仍然存在。

<input name="valX[]" class="input" type="text" autocomplete="off" 
                            placeholder="Enter X value"  autofocus onkeypress='validate(event)' 
                            onkeydown="pressEnter(event)" required>