Javascript for循环中生成的重复表单未获取所需值

我有一个表单，根据注册人数通过for循环复制。表单上有一个带有select下拉列表的字段。还有一个文本字段，显示选定下拉项的值。这是通过javascript实现的

<?Php for ($i=0; $i<$totalpersons; $i++) { ?>
    <div>
        <span><label>SURNAME *</label></span>
        <span><input name="surname[]" type="text" class="textbox" id="surname" required></span>
    </div>
    <div class="clear_3"></div>
    <div>
        <span><label>FIRST NAME *</label></span>
        <span><input name="firstname[]" type="text" class="textbox" id="firstname" required></span>
    </div>
    <div class="clear_3"></div>
    <div>
        <span><label>OTHER NAME</label></span>
        <span><input name="othername[]" type="text" class="textbox" id="othername"></span>
    </div>
    <div class="clear_3"></div>
    <div>
        <span><label>DOB *</label></span>
        <span><input name="dob[]" type="text" class="textbox" id="dob" required></span>
    </div>
    <div class="clear_3"></div>
    <div>
        <span><label>GENDER *</label></span>
        <span>                          
            <select name="gender[]" id="gender"  tabindex="1" aria-hidden="true" required style="width: 100%; display: block;height:50px;padding:10px;">
                <option value="" selected="selected"></option>
                <option value="Male">Male</option>
                <option value="Female">Female</option>
                <option value="Other">Other</option>
            </select>
        </span>
    </div>
    <div class="clear_3"></div>
    <div>
        <span><label>AGE RANGE *</label></span>
        <span>                          
            <select name="screeningamount[]" id="screeningamount"  tabindex="1" aria-hidden="true" required style="width: 100%; display: block;height:50px;padding:10px;"  onClick="GetSelectedValue()">
                <option value="" selected="selected"></option>
                <option value="25000" id="0yrsto4yrs">0 YEAR TO 4 YEARS</option>
                <option value="27000" id="5yrsto10yrs">5 YEARS TO 10 YEARS</option>
                <option value="31000" id="11yrsto14yrs">11 YEARS TO 14 YEARS</option>
                <option value="35000" id="15yrsabove">15 YEARS AND ABOVE</option>
            </select>
        </span>
    </div>
    <div class="clear_3"></div>
    <div>
        <span><label>AMOUNT DUE(₦):</label></span>
        <span><input name="amount" type="text" class="textbox" id="amount" readonly></span>
    </div>
    <div class="clear_3"></div>
    <div>
        <span><label>E-MAIL *</label></span>
        <span><input name="email[]" type="text" class="textbox" id="email" required></span>
    </div>
    <div class="clear_3"></div>
    <div>
        <span><label>PHONE *</label></span>
        <span><input name="phone[]" type="text" class="textbox" id="phone" required></span>
    </div>
<?Php } ?>

---

我如何解决这个问题？我需要每个表单，而不考虑生成的表单数量，以便能够在每个表单上显示select下拉列表的值

您应该知道HTML属性“id”在整个页面上必须是唯一的。复制字段时，请尝试在ID中添加数字，以便JavaScript能够处理表单。@SenadMeškin是的，我理解，但不知道如何处理。如果表单是有限的，我只需要在每个表单id上加上一个数字来区分它。但是表单是通过for循环生成的。@SenadMeškin我认为可以使用javasript解决它，但我不知道如何处理它，因为我不知道javascript muchid=“surename”。$i.”

function GetSelectedValue(){
    var select = document.getElementById('screeningamount');
    var input = document.getElementById('amount');

    select.onchange = function() {
        input.value = select.value;
    }
}