submit multiple unique forms with ajax on one page
<p>So, I have this schedule, selfcreated with HTML tables and Mysql Database inputs.
It looks something like this:</p>

<p>Week -- Monday -- Thuesday -- Wednesday -- Thursday -- Friday -- Saturday -- Sunday</p>

<p>And for example, in <strong>week 5 on Thuesday</strong> there is me working, <strong>Stan 12:00 - 19:00.</strong></p>

<p>I want to add another employee on this day and I do not want to refresh the page so I tried to do it with ajax.
So I click the button that adds an employee, I now need to see a little form with a option box for all employee names, and another input for the time.
After I click add I need it to add the employees name to the schedule with the time and it has to be saved into the database.</p>

<p>This is how the schedule looks like:
<a href="https://i.stack.imgur.com/OhGrM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OhGrM.png" alt="enter image description here"></a></p>

<p>There are 2 times a plus button. The second plus button is the button I try to add, it will not redirect me to another page but just toggles an division.
So whenever I click on the second plus button I have this:
<a href="https://i.stack.imgur.com/YECB1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YECB1.png" alt="enter image description here"></a></p>

<p>Now I can easily select an employee and give them a time to work.
But now here is my problem. If I add them I want it to add the employee to the database that will be something like this:</p>

<pre><code>INSERT INTO rooster (idusers,week, thuesday) VALUES ('1','8','12:00 - 16:00');
</code></pre>

<p>And it needs to add the employees name and time to the day just like the other names (you see in the pictures).</p>

<p>So, <strong>plus button --> show division where you can add an employee --> add employee to database and show the name and time like the other names on the page.</strong></p>

<p>Right now when I add someone it will only show me some text and because I've used the result class division in each table row it will automaticly update it in each row which is not my intension.</p>

<p>The text only needs to appear on the day I added someone.
Follow these steps:
<a href="https://i.stack.imgur.com/koxRz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/koxRz.png" alt="enter image description here"></a>
<a href="https://i.stack.imgur.com/iMcGU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iMcGU.png" alt="enter image description here"></a></p>

<p>Here is my code I use:
For the plus button (second one):</p>

<pre><code>echo ' &lt;a class="first" style="cursor: pointer; cursor: hand;"&gt;&lt;i class="fa fa-plus-square"&gt;&lt;/i&gt;&lt;/a&gt;
       &lt;form method="POST" id="reg-form" style="display:none;"&gt;
     &lt;div id="form" class="result"&gt;


      &lt;select name="gebruikersnaam" class="design"&gt;';
                                        while ($row = mysqli_fetch_array($all_u)) {
                                        echo "&lt;option value='".$row['gebruikersnaam']."'&gt;".$row['gebruikersnaam']."&lt;/option&gt;";
                                        }
                                    echo '&lt;/select&gt;

        &lt;br/&gt;&lt;input type="text" value="00:00 - 24:00" name="test"/&gt;      
        &lt;button type="submit"&gt;+&lt;/button&gt;


      &lt;/div&gt;
      &lt;/form&gt;   
';
</code></pre>

<p>For the ajax handling:</p>

<pre><code>$(document).on('submit', '#reg-form', function()
 {

  //var fn = $("#fname").val();
  //var ln = $("#lname").val();

  //var data = 'fname='+fn+'&amp;lname='+ln;

  var data = $(this).serialize();


  $.ajax({

  type : 'POST',
  url  : 'submit.php',
  data : data,
  success :  function(data)
       {
      $("#reg-form").fadeOut(500).hide(function()
      {
       $(".result").fadeIn(500).show(function()
       {
        $(".result").html(data);
       });
      });

       }
  });
  return false;
 });
</code></pre>

<p>And the submit.php (for the ajax)</p>

<pre><code>&lt;?php
if($_POST)
{
 $fname = $_POST['fname'];
 $lname = $_POST['lname'];
 $email = $_POST['email'];
 $phno = $_POST['phno'];

 ?&gt;

    &lt;table border="0"&gt;

    &lt;tr&gt;
    &lt;td colspan="2"&gt;Succedd !!!&lt;/td&gt;
    &lt;/tr&gt;

    &lt;tr&gt;
    &lt;td colspan="2"&gt;&lt;hr /&gt;&lt;/td&gt;
    &lt;/tr&gt;

    &lt;tr&gt;
    &lt;td&gt;First Name&lt;/td&gt;
    &lt;td&gt;&lt;?php echo $fname ?&gt;&lt;/td&gt;
    &lt;/tr&gt;

    &lt;tr&gt;
    &lt;td&gt;Last Name&lt;/td&gt;
    &lt;td&gt;&lt;?php echo $lname ?&gt;&lt;/td&gt;
    &lt;/tr&gt;

    &lt;tr&gt;
    &lt;td&gt;Your eMail&lt;/td&gt;
    &lt;td&gt;&lt;?php echo $email; ?&gt;&lt;/td&gt;
    &lt;/tr&gt;

    &lt;tr&gt;
    &lt;td&gt;Contact No&lt;/td&gt;
    &lt;td&gt;&lt;?php echo $phno; ?&gt;&lt;/td&gt;
    &lt;/tr&gt;

    &lt;/table&gt;
    &lt;?php

}

?&gt;
</code></pre>

<p>If you need any more information, PLEASE ASK!
If you want to look closer, please send me a PM I will give you a test account.</p>

<p>Thanks for helping!</p>