여분필드 쪼개서 추가 버튼으로 클릭시 저장 되게 하는 방법 문의드립니다

<?php
$write_wr_31 = '';
if (isset($_POST['wr_31']) == true && is_array($_POST['wr_31']) == true) {
    $write_wr_31 = array_filter($_POST['wr_31']);
    $write_wr_31 = implode('|', $write_wr_31);
}
$write = ['wr_31' => $write_wr_31];

 

$wr31epd = explode("|",$write['wr_31']);

 

$wr31epd = array_filter($wr31epd);
?>

 

<form method="post">
<input type="submit">

 

<p>
    <button class="add_field">add_field</button>
    <div class="input_wrap"></div>
</p>

 

<input type="submit">
</form>

 

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script>
const wrapper = $('.input_wrap'); // 입력 필드를 포함하는 컨테이너 선택
const addButton = $('.add_field'); // 추가 버튼 선택
const maxFields = 15; // 최대 입력 필드 수 설정 
let fieldCount = 1; // 현재 입력 필드 수

 

// '추가하기' 버튼 클릭 시 이벤트
addButton.click(function(e, v = null) {
    e.preventDefault(); // 페이지 리로드 방지
    if (fieldCount < maxFields) { // 최대 필드 수 체크
        const value = v || '';
        fieldCount++; // 필드 수 증가
        // 새 입력 필드 추가
        wrapper.append(`
            <div class="input_list">
<br>
<table width=95% align="center">
<th colspan="4" height=45px><p style="padding:0 0 0 10px;">상품정보</p></th>
<tr>
<td width=15%>상품명</td><td width=25%><input type="text" name="wr_31[]" value="${value}" class="form-control" placeholder="입력해주세요."></td>

</tr></table>
<br>
<a href="javascript:void(0);" class="remove_field">삭제</a>
            </div>

        `);

    }
});
// '삭제' 링크 클릭 시 이벤트
wrapper.on('click', '.remove_field', function(e) {
    e.preventDefault(); // 페이지 리로드 방지
    $(this).parent('.input_list').remove(); // 필드 제거
    fieldCount--; // 필드 수 감소
});

 

<?php
foreach ($wr31epd as $v) {
    echo 'addButton.trigger("click", ["' . $v . '"]);';
}
?>

 

</script>