如何从div中的某些表单提交所有数据？

I want to make some forms in a div, and in this form, there is requirement that some form can add some input text like add a row in a table and in this div can add another div to add form to write data too. I'm already success to add data but it only works in a form because my button only can submit the data if I put it in a form. I'm new in using PHP, HTML, and JavaScript, so when I was writing code, i'm still in learning too and search many website to solve this but i'm just get the answer to submit only a form. please help me, i'm very thankful for your response

<div id="myproyek">
   <div id="formtrigger" class="content">
      <form id="tableToModify" name="code" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
         <div class="form-group">
            <td>Create Url</td>
            <td>:</td>
            <td><input type="text" name="nameURL" id="nameURL" placeholder="URL"></td>
         <span class="error"><?php echo $nameURLErr;?></span>
         </div>
         <div class="form-group">
            <td>Parameter</td>
            <td></td>
            <td></td>
         </div>
         <div class="form-group">
            <td>Key</td>
            <td>:</td>
            <td>Value</td>
         </div>
         <div class="form-group">
            <input type="text" id="key" name="key" placeholder="Key">
            <span><?php echo $keyErr ?></span>
            <input type="text" id="value" name="value" placeholder="Value">
            <span><?php echo $valueErr ?></span>
         </div>
         </form>
         <input type="button" onclick="addRow()" value="Create Row" />
<div>
         <label><input type="radio" name="colorRadio" value="asynchronous">Asynchronous</label>
         <label><input type="radio" name="colorRadio" value="synchronous">Synchronous</label>
         <div class="asynchronous box " style="display: none" >
            <form id="tableAscyToModify" >
               <div class="form-group">
                  <td>Callback Url</td>
                  <td>:</td>
                  <td><input type="text" name="createurl" placeholder="Callback URL" onfocus="this.placeholder = ''" onblur="this.placeholder = 'URL'" value="<?php echo $asyncValue?>"></td>
                  <span><?php echo $asyncURLErr ?></span>
               </div>
               <div class="form-group">
                  <td>Format Response</td>
                  <td></td>
                  <td></td>
               </div>
               <div class="form-group">
                  <td>Key</td>
                  <td>:</td>
                  <td>Value</td>
                  </div>
               <div class="form-group">
                  <input type="text" id="item-code" name="createurl" placeholder="Key">
                  <span><?php echo $asyncKeyErr ?></span>
                  <input type="text" id="item-code" name="createurl" placeholder="Value">
                  <span><?php echo $asyncValueErr ?></span>
               </div>
            </form>
            <input type="button" onclick="createRowAsyc()" value="Create Row" />
         </div>
         <div class="synchronous box " style="display: none">
            <form id="tableSyncToModify" >
               <div class="form-group">
                  <td>Format Response</td>
                  <td></td>
                  <td></td>
               </div>
               <div class="form-group">
                  <td>Key</td>
                  <td>:</td>
                  <td>Value</td>
               </div>
               <div class="form-group">
                  <input type="text" id="item-code" name="createurl" placeholder="Key">
                  <input type="text" id="item-code" name="createurl" placeholder="Value">
               </div>
            </form>
            <input type="button" onclick="createRowSync()" value="Create Row" />
            </div>
         </div>
      </form>
   </div>

<button name="submit" id="submit">Submit</button>
// i think button should be here because i want to submit all my form
</div>

Here is my PHP Code

<?php
// define variables and set to empty values
$nameURLErr = $keyErr = $valueErr = $asyncURLErr = $asyncKeyErr = $asyncValueErr = $syncURLErr = $syncKeyErr = $syncValueErr = "";
$nameURL = $key = $value = $asyncURL = $asyncKey = $asyncValue = $syncURL = $syncKey = $syncValue = "";


if (isset($_POST['value'])) {
    if (empty($_POST["nameURL"])) {
        $nameURLErr = "URL is required";
    } else {
        $nameURL = test_input($_POST["nameURL"]);
        // check if name only contains letters and whitespace
        if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$nameURL)) {
            $nameURLErr = "Only letters and white space allowed";
        }
    }

    if (empty($_POST["key"])) {
        $keyErr = "Key is required";
    } else {
        $key = test_input($_POST["key"]);
    }
    if (empty($_POST["value"])) {
        $valueErr = "Value is required";
    } else {
        $value = test_input($_POST["value"]);
    }

    if (empty($_POST["asyncURL"])) {
        $asyncURLErr = "URL is required";
    } else {
        $asyncURL = test_input($_POST["asyncURL"]);
        // check if name only contains letters and whitespace
        if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$asyncURL)) {
            $asyncURLErr = "Only letters and white space allowed";
        }
    }

    if (empty($_POST["asyncKey"])) {
        $asyncKeyErr = "Key is required";
    } else {
        $asyncKey = test_input($_POST["asyncKey"]);
    }
    if (empty($_POST["asyncValue"])) {
        $asyncValueErr = "Value is required";
    } else {
        $asyncValue = test_input($_POST["asyncValue"]);
    }

    $fp = fopen('data.html', 'a');

    $data = '<p> URL : '.$nameURL. '</p>'.
        '<p>Key : ' . $key . '<br>Value : '. $value . '</p>' .
        '<p>Async URL : ' . $asyncURL . '</p>' .
        '<p>Key : ' . $asyncKey . '<br>Value : ' . $asyncValue . '</p>';    
    ;


    fwrite($fp, $data);
    fclose($fp);
}

function test_input($data) {
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;
}
?>

Here is my Javascript code

function addRow () {
        document.querySelector('#tableToModify').insertAdjacentHTML(
            'beforeend',
            `<form>
                <div class="form-group">
                    <input type="text" name="name" value="" placeholder="Key" />
                    <input type="text" name="value" value="" placeholder="Value" />
                    <input type="button" value="-" onclick="removeRow(this)">
                </div>
            </form>`
        )
    }

function createRowAsyc() {
        document.querySelector('#tableAscyToModify').insertAdjacentHTML(
            'beforeend',
            `<div class="form-group">
                <input type="text" name="name" value="" placeholder="Key"/>
                <input type="text" name="value" value="" placeholder="Value"/>
                <input type="button" value="-" onclick="removeRow(this)">
            </div>`
        )
    }

    function createRowSync() {
        document.querySelector('#tableSyncToModify').insertAdjacentHTML(
            'beforeend',
            `<div class="form-group">
                <input type="text" name="name" value="" placeholder="Key"/>
                <input type="text" name="value" value="" placeholder="Value"/>
                <input type="button" value="-" onclick="removeRow(this)">
            </div>`
        )
    }

function removeRow (input) {
        input.parentNode.remove()
    }

I expect the output is all the data is write in all the form, but if i put the button right in last div code, but there is nothing to change. If i put button in

<form id="tableToModify">
</form>

data is submitted only in this data and successful submitted in text.html

Or do you have some suggestion, how i manage my form template

You can get your forms into one by using FormData()

Here we have a button element outside all forms, this will be our trigger to submit:

<div>
    <form id="form-one">
        <!-- the form -->
    </form>

    <form id="form-two">
        <!-- the form -->
    </form>

    <button type="button" id="submit-data">
        <span>Submit all forms!</span>
    </button>
</div>

then in your JavaScript we collect all the FormData's into one "mothership" FormData by using loops, triggered by the button click

document.addEventListener('click', function()
{
    let formData = new FormData(),
        formOne = new FormData(document.getElementById('form-one')),
        formTwo = new FormData(document.getElementById('form-two'));

    for (let pair of formOne.entries())
    {
        formData.append(pair[0], pair[1])
    }

    for (let pair of formTwo.entries())
    {
        formData.append(pair[0], pair[1])
    }
}, false)