Updating database after clicking a button(it might seem simple but it cant work pls read on)

Question

So i have this page whereby whenever i click on a button add row, it will add an additional row for me. Afterwards, there will be a finish button whereby when user click on it, it will update the database. This is where my error comes in. Whenever i update, they cannot find my $_Post['id']. These are my codes for the page whereby you can add row everytime you click on a button.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div id="div"></div>
    <button id='add' value="Add Row">Add Row</button>
    <form action = newExpertise.php method="post">

        <button id="finish" name = "finish" value ="Finish" onclick="clicktoindex()">Finish</button>            
        <input type='hidden' name='store' id='store'>



    <script>
        var x=1;
        var count=0;

        $('body').on('click','#add',function()
        {
            if(count <= 10)
            {   
                $('#div').append("<form action = newExpertise.php method='post'><div class='line'><input type='text' name = 'txta"+x+"' id='txta"+ x +"'><span class =wordtab></span><input type='text' name = 'txtb"+x+"' id='txtb"+ x +"'><span class =wordtab></span><button class='delete' value ='Delete Row'>Delete Row</button></div><br></form>");
                count++;
                x++;
            }
            else
            alert("Maximum 10 Skills");
        });

        $('body').on('click','.delete',function()
        {
        $(this).closest('.line').remove(); 

        count--;
        });

        function clicktoindex(){
            document.getElementById('store').value=count;
        }
    </script>

I think that because when i click on the finish button, it refreshes the page and therefore, my textboxes will all be gone, so they are not able to detect the id of the textboxes ($_POST['txta1']) . I thought of using ajax to solve this problem but i would like my page to proceed to the next page after clicking on the finish button. These are my codes when i click on the button finish.

if(isset($_POST['finish']))
    {
             for($x=1; $x <= $_POST['store']; $x++)
             {
                     $finishquery = "INSERT INTO particulars_expertise (Particulars_ID, Expertise, Years_experience)
                    VALUES('".$_POST['storeid']."','".$_POST['txta1']."', '".$_POST['txtb1']."')";

            if ($connect->query($finishquery) === TRUE)
            {

            }

            else 
            {
                echo "Error updating record: " . $connect->error;
            }   
             }
    }

Answer 1

Try The following code, you have many errors in the code above !

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form action ="newExpertise.php" method="post">
  <div id="skills">
    <div class="skill">
      <input type="text" name="skills[]" />
      <button type="button" class="delete">Delete</button>
    </div>
  </div>
  <button id="add" value="Add Row">Add Row</button>

  <button type="submit" id="finish" name ="finish" value="Finish">Finish</button>            
  <input type='hidden' name='store' id='store'>
</form>



<script>
    var x=1;
    var count=0;

    $('body').on('click','#add',function()
    {
        if(count <= 10)
        {   
            $('#skills').append('<div class="skill"><input type="text name="skills[]" /><button type="button" class="delete">Delete</button></div>');
            count++;
            x++;
        }
        else
        alert("Maximum 10 Skills");
    });

    $('body').on('click','.delete',function()
    {
    $(this).closest('.skill').remove();

    count--;
    });

    function clicktoindex(){
        document.getElementById('store').value=count;
    }

Answer 2

Change your query like this, you forgot to add )

$finishquery = "INSERT INTO `particulars_expertise`(`Particulars_ID`, `Expertise`, `Years_experience`)
                VALUES('$_POST[storeid]','$_POST[txta1]', '$_POST[txtb1]')";