How to add/append PHP + HTML code in JQuery .append() - php

Question

I'm trying to append PHP code in Jquery. I'm getting confused in the quotation marks and not getting correct result.
below code.
<script>
$(document).ready(function(){
$("#add").click(function(event){
event.preventDefault();
//var text_box = "<br>Fee type: <input type='text' name='f1[]'>amount : <input type='text' name='f2[]'><br>";
var text_box = "<?php
#Fee type textbox
if(form_error('feetype'))
echo "<div class='form-group has-error' >";
else
echo "<div class='form-group' >";
?>
<label for='feetype' class='col-sm-2 control-label'>
<?=$this->lang->line('invoice_feetype')?>
</label>
<div class='col-sm-6'>
<input type='text' class='form-control' id='feetype' name='feetype[]' value='<?=set_value('feetype')?>' >
</div>
<span class='col-sm-4 control-label'>
<?php echo form_error('feetype'); ?>
</span>
</div>";
$("#info").append(text_box);
});
<script>

Answer 1

You can use an AJAX call to execute a PHP script on the server. So, for your if statements, just send the variables with conditions to be tested to a php script via ajax and php will return the html code of the div which you can then append to an element.
As an example for your first div;
You can set up an ajax call like;
<script>
$(document).ready(function(){
$("#add").click(function(event){
event.preventDefault();
var part;
var test = 'feetype';
$.ajax({
type: 'POST',
url: "get_div.php",
data: {test:test},
success: function(result){
part = result;
}
})
var text_box = part + "<label for='feetype' class='col-sm-2 control-label'>"
/***
all other code here
***/
</script>
Then in your php script
<?php
#Fee type textbox
if(form_error($_POST['test']))
echo "<div class='form-group has-error' >";
else
echo "<div class='form-group' >";
Let me know if it helps or if you find a problem.