Calling class method in jquery

Hey im trying to build a simple inventory program. I have class like this :

    <?php
    class category
    {
    public static $catoptSupplies=array(
        "Cleaning Supplies",
        "Guest Supplies",
        "Printing Supplies"
        );
    public static function loopcat3()
        {
            $loop3=category::$catoptSupplies;
            $spnum=1;
            foreach ($loop3 as $prnloop3) 
            {   
                echo "<option value='spcat$spnum'>$prnloop3</option>";
                $spnum++;

            }
        }

    }

?>

now i want to append rows in my table which contain select option like this:

 <script>
    $(document).ready(function(){
        var count=1;
        $('#addMsGDRow').click( function(){
            count = count+1;
            var addMsGDRow ='<tr id="row'+count+'">
                                    <td>
                                        <select style="font-size: 12px; width: 83%; text-align: center;">
                                            <option>--Choose Category--</option>
                                            <?php echo category::loopcat3(); ?>
                                        </select>
                                    </td>
                                    <td>
                                        <select style="font-size: 12px;  text-align: center;">
                                            <option>Unit</option>
                                            <option>Meter</option>
                                            <option>Pcs</option>
                                        </select>
                                    </td>
                                    <td><input type="text" name="" style="width: 70px;"></td>
                                    <td><input type="text" name="" style="width: 140px;"></td>
                                    <td>
                                        <textarea style="width: 121px; height: 43px;"></textarea>
                                    </td>
                           <td><input type="number" name="" style="width: 75px;" min="0"></td>
                           <td><input type="number" name="" min="0" style="width: 100px;"></td>
                           <td><input type="number" name="" min="0" style="width:140px;"></td>
                           <td><button type="button" name="remove" data-row="row'+count+'" class="btn btn-danger btn-xs removemsgd">-</button></td>
                                </tr>';
            $('#tableMsGoods').append(addMsGDRow);
        });
        $(document).on('click', '.removemsgd', function(){

          var delete_row=$(this).data("row");
          $('#'+delete_row).remove();

      }); 
    });
</script>

but new row wont added if call my class using normal php line. It does however add a new row if i remove the php line. So, how can i call my class in jquery ?

Answer

The static PHP function is called, but the problem is that it returns a string with single quotes, which happens to be the string delimiter you use in JavaScript, and so the JS string literal terminates at a place you don’t want it to end. Also, you used the line continuation character at every line in the JS string literal, but not after the PHP-generated content, so that also would break the string literal.

The easiest solution is to use the back tick character in JS to delimit your string, so it becomes a template literal. This way you don’t need the line continuation character either.

So like this:

var addMsGDRow = `
    <tr id="row'+count+'">
        <td>
            <select style="font-size: 12px; width: 83%; text-align: center;">
                <option>--Choose Category--</option>
                <?php echo category::loopcat3(); ?>
            </select>
        </td>
        <td>
            <select style="font-size: 12px;  text-align: center;">
                <option>Unit</option>
                <option>Meter</option>
                <option>Pcs</option>
            </select>
        </td>
        <td><input type="text" name="" style="width: 70px;"></td>
        <td><input type="text" name="" style="width: 140px;"></td>
        <td>
            <textarea style="width: 121px; height: 43px;"></textarea>
        </td>
        <td><input type="number" name="" style="width: 75px;" min="0"></td>
        <td><input type="number" name="" min="0" style="width: 100px;"></td>
        <td><input type="number" name="" min="0" style="width:140px;"></td>
        <td><button type="button" name="remove" data-row="row'+count+'" class="btn btn-danger btn-xs removemsgd">-</button></td>
    </tr>`;