How do i append the PHP code to the Javascript append function under <script> tag

Question

My Script file is

<script type="text/javascript">
   $(document).ready(function(){
          $(".select2").select2();
          var MaxInputs       = 50; //maximum input boxes allowed
          var InputsWrapper   = $("#overall_wrapper"); //Input boxes wrapper ID
          var AddButton       = $("#AddMoreFileBox"); //Add button ID
          var x = InputsWrapper.length; //initlal text box count
          var FieldCount=1; //to keep track of text box added      
          $(AddButton).click(function (e)  //on add input button click
          {
           if(x <= MaxInputs) //max input box allowed
           {
           FieldCount++; //text box added increment
           //add input box
           $(InputsWrapper).append('<div class="repeat_element" id="row_'+FieldCount+'"><div class="col-sm-1" id="row1_'+FieldCount+'"><input type="text" class="form-control" name="s_no[]" value="'+FieldCount+'"  /></div><div class="col-sm-2" id="row1_'+FieldCount+'"><select class="form-control select2" name="part_no[]" id="part_no" onchange="choose_parts(this.value);" required><option value="">Please Select</option></select></div><div class="col-sm-3" id="row1_'+FieldCount+'"><input type="text" class="form-control" name="part_desc[]" value=""  /></div><div class="col-sm-1" id="row1_'+FieldCount+'"><input type="text" class="form-control" name="part_mrp[]" value=""  /></div><div class="col-sm-1" id="row1_'+FieldCount+'"><input type="text" class="form-control" name="req_qty[]" value=""  /></div><div class="col-sm-1" id="row1_'+FieldCount+'"><input type="text" class="form-control" name="instock[]" value=""  /></div><div class="col-sm-2" id="row1_'+FieldCount+'"><select class="form-control" name="billing_type[]"><option value="Cash">Cash</option><option value="Credit">Credit</option></select></div><div class="col-sm-1" id="row1_'+FieldCount+'"><div onclick="hiding('+FieldCount+')" class="removeclass"><div class="btn btn-danger" id="AddMoreFileBox"><i class=" fa fa-minus-circle" title="Delete"></i> </div></div></div>');
                    $(".select2").select2();  // Reinitialize the select2 again when the div is appended
                    x++; //text box increment
                    }
                    return false;
                    });

        });
</script>

And i have a page where i call this Add button jquery and i get the second row fine but i am unable to call the PHP functions like foreach , if into the append script.

My doubt is that when i click on the plus sybmol i have called the select2 JS and it comes fine but i need to call the PHP function into it for looping of option value in the <select> .

I need to generate dynamic options in this selected tag under my JS

<select class="form-control select2" name="part_no[]" id="part_no" onchange="choose_parts(this.value);" required><option value="">Please Select</option></select>

My PHP function for getting the

function getAllActiveSpare($id)
{
    $query="";
    $conn=connectToDB();
    if(func_num_args()==1)
    {
     $query="SELECT * FROM `spare` WHERE `id`='".$id."' AND `status`='1' AND `delete_status`='0'";
    }
    else
    {
    $query="SELECT * FROM `spare` WHERE `delete_status`='0' AND `status`='1' ORDER BY `id` DESC ";
    }
    $results = $conn->query($query);
    $counts = $results->num_rows;
    if($counts==0)
    {
        return false;
    }
    else
    {
        $rows=[];
        while($row = $results->fetch_assoc())
        {
            $rows[] = $row;
        }
        return $rows;
    }   
}

I need to append this part alone in the JS Select TAG under append function.

<?php $parts_number = getAllActiveSpare();                      
if($parts_number==false)
{
?>
<option value="">No Parts Created Yet</option>
<?php  
}
else
{
?>
<option value="">Please Select</option>
<?php  
foreach ($parts_number as $key => $single_parts) {?>
<option value="<?php echo $single_parts['ref_part_no']; ?>"><?php echo $single_parts['ref_part_no']; ?></option>
<?php
}
}
?>                             
</select>

This above things alone i have tried. Can anyone help me with this . I was struck up for the past two Days.

Answer 1

It seems you do not understand the difference between PHP and JavaScript, or the difference between the server and client side.

Difference between Javascript and PHP

To solve your problem, you probably need to use Ajax.

https://stackoverflow.com/a/23740549/851885