Append table using jQuery with php - php

Question

Hi every one I'm trying to append a table within a form. But i'm having an error message in console: "Uncaught SyntaxError: missing ) after argument list". When I click the button to add rows it keeps directing me to php script. I Tried to fix it but no luck anyway sorry for bad english, here are the codes.
$('#more_row').append('<tr id="row'+i+'"><td><?php echo "<select name='alpha_num[]' class='form-control' id='item'>"; echo"<option value=''selected disabled>Select Material</option>";while($row = mysqli_fetch_row($result1)){echo"<option value=$row[0]>$row[1]$row[0]</option>";}echo"</select>";?></td><td><input type="text" name="qty[]" class="form-control" id="quantity" placeholder="Qty"></td><td><input type="text" name="uom[]" class="form-control" id="um" placeholder="UOM"></td><td><select name="status[]" class="form-control" id="stat"><option value="approved">approved</option><option value="return">return</option></select></td><td><button id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
<div class="panel-body">
<form method="post" action="material_receive_report_process.php">
<div class="row">
<div class="col">
<label for="dr">PO.NO</label>
<input type="text" name="dr_no" class="form-control" id="dr">
</div>
<div class="col">
<label for="dr">DR.NO</label>
<input type="text" name="dr_no" class="form-control" id="dr">
</div>
<div class="col">
<label for="date">Date</label>
<input type="text" name="date" class="form-control" id="date">
</div>
</div>
<table id="more_row">
<tr>
<td>
<?php echo "<select name='alpha_num[]' class='form-control' id='item'>";
echo"<option value=''selected disabled>Select Material</option>";
while($row = mysqli_fetch_row($result1)){
echo"<option value=$row[0]>$row[1]$row[0]</option>";
}
echo"</select>";
?>
</td>
<td>
<input type="text" name="qty[]" class="form-control" id="quantity" placeholder="Qty">
</td>
<td>
<input type="text" name="uom[]" class="form-control" id="um" placeholder="UOM">
</td>
<td>
<select name="status[]" class="form-control" id="stat">
<option value="approved">approved</option>
<option value="return">return</option>
</select>
</td>
<td><button id="add1" class="btn btn-info">Add</button></td>
</tr>
</table>
<br>
<p>Condition:
<input type="checkbox" name="condition[]" value="damage_visible">Damage visible
<input type="checkbox" name="condition[]" value="good_condition">Good conditon
<input type="checkbox" name="condition[]" value="full_qty">Full qty
<input type="checkbox" name="condition[]" value="partial_qty">Partial qty</p>
<div class="form-group">
<label for="supp">Supplier</label>
<input type="text" name="supplier" class="form-control" id="supp">
</div>
<div class="form-group">
<label for="remark">Remarks</label>
<textarea name="remark" class="form-control" id="remark"></textarea></p>
<input type="submit" name="save" class="btn btn-success" value="Save">
</div>
</form>
<br><br>
</div>
</div>

Answer 1

The 'add row' button submits the form because the default value for the type attribute of button elements is "submit". My guess is that the syntax error is due to the mess of single quotes, double quotes, and line breaks that PHP is dumping in your Javascript. Look at the generated code your browser gets. That's what needs to be correctly formed.

Answer 2

The error is most likely due to conflict between Php and JavaScript strings. Consider escaping i.e. \' and using different one for the two say JavaScript use double quotes " while Php use single quotes '