how to store a dynamic form data in two different table?

Question

I have a form where input fields are bieng added by a button with jquery. and all field have a related another field. Actually i am adding "Symptoms" where "Related Medicine" field are bieng added by "add another medicine" button. where "related medicine" has another related field "grade". a symptoms may have some different medicine with grade point. now i have to store symptoms data in "symptoms" table, and also have to store multiple medicine data in "related medicine" tbale.

The medicine input box is getting autosearch values from "medicine" table with some another code.

See my code first.

<form method="post" action="">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Name" name="medname" 
    required>
  </div><!-- form-group -->

  <div class="form-group">
    <input type="text" class="form-control" name="medchap"                               
     placeholder="Chapter" required>
  </div><!-- form-group -->

  <div class="form-group">
    <input type="text" class="form-control" name="medsubchap"
    placeholder="Sub Chapter">
  </div><!-- form-group -->

  <div class="form-group">
    <input type="text" class="form-control" name="medsource"
    placeholder="Short Form" required>
  </div><!-- form-group -->

  <div class="form-group" id="add1">
    <input type="text" class="form-control" name="relmed"
    placeholder="related medicine" required>

    <input type="text" class="grade form-control" placeholder="Grade"><div 
    style="clear:both"></div>
  </div><!-- form-group -->

  <button id="btn1" class="btn btn-success btn-icon"><i class="typcn typcn- 
   document-add"></i></button>
    <br/>

   <button name="addmed" class="btn btn-az-primary pd-x-20">Add</button>
</form>

Now when "#btn1" is clicked...

<script>
        var i = 1;
        $("#btn1").click(function(e) {
            e.preventDefault();
        $("<div />", { "class":"add13", id:"input"+i })
            .append($("<input />", { placeholder: "Related Medicine", class:"medi form-control select2", id:"name"+i }))
            .append($("<input />", { type: "text", placeholder: "Grade", class:"grade form-control", id:"property"+i }))
            .appendTo("#add1");
        i++;
        });

        </script>

My table structure is like below

Symptoms has id,name,chapter,subchapter,shortform,pending,addedby rows and relatedmedicine has id,name,grade,symtom

I am trying to store all data in two table, but dont know how to store those relational values into two table.

Answer 1

First of all thanks for your question. For sending multiple dynamic data to backend you have to make a little bit of change into your code. For example, if you send related medicine and grade multiple values then you have to change like it,

  <div class="form-group" id="add1">
    <input type="text" class="form-control" name="relmed[]"
    placeholder="related medicine" required>

    <input type="text" class="grade form-control" placeholder="Grade" name="grade[]"><div 
    style="clear:both"></div>
  </div><!-- form-group -->

and jQuery append should chnage like it-

 var i = 1;
    $("#btn1").click(function(e) {
        e.preventDefault();
    $("<div />", { "class":"add13", id:"input"+i })
        .append($("<input />", { placeholder: "Related Medicine", class:"medi form-control select2", id:"name"+i, name: "relmed[]" }))
        .append($("<input />", { type: "text", placeholder: "Grade", class:"grade form-control", id:"property"+i, name: "grade[]" }))
        .appendTo("#add1");
    i++;
    });

You have to pass data to backend using jquery form submit if you use jquery ajax to send data to backend. If you are using PHP as your backend to store multiple data for related medicine and grade then code will be like it-

<?php

    $related_medicins = $_POST['relmed'];
    $grades = $_POST['grade'];

    for($i=0; $i<count($related_medicins); $i++){
        if($related_medicins[$i]!='' && $grades[$i]!=''){

            $each_single_related_medicin = $related_medicins[$i];
            $each_single_grade = $grades[$i];
        }
    }


?>

Thanks.