Generating buttons that will execute a java script function on click

Question

I have an HTML table which has a few rows which has a edit button in the last column. In order to avoid reloading of page unnecessarily I have placed a form beside the table which will insert data into the DB via AJAX, which will return a JSON string with the object data. I have to append this data into the table. I know how to append the data but I'm getting an unexpected string error in the browser on the jquery function precisely in the line where the button is present. The onclick function is given below.

$("#subBtn").click(function(){
        $.post("/EmployeeSpringMVC/newRule",
                {
                    name: $("#ruleName").val(),
                    desc: $("#ruleDesc").val(),
                    startDate: $("#ruleStartDate").val(),
                    severity: $("#ruleSeverity").val()
                },
                function(data, status){
                     alert("Data: " + data + "\nStatus: " + status);
                     var rule = jQuery.parseJSON( data );
                     var edtbtn = "<button class='btn btn-primary btn-sm editBtn'" +
                            "onclick='editBtnClick(" + rule.ruleId + ", '" + rule.ruleName + "', '" + rule.ruleDesc "', '" + rule.startDate + "', '" + rule.ruleSeverity + "')'>" +
                            "<span class='glyphicon glyphicon-pencil' aria-hidden='true'></span>" +
                            "Edit</button>";
                     var row = "<tr id=" + rule.ruleId + ">" +
                                    "<td class='nameF'>" + rule.ruleName + "</td>" + 
                                    "<td class='descF'>" + rule.ruleDesc + "</td>" +
                                    "<td class='dateF'>" + rule.startDate + "</td>" +
                                    "<td class='severF'>" + rule.ruleSeverity + "</td>" +
                                    "<td>" + edtbtn +
                                    "<button onclick='window.location = '/EmployeeSpringMVC/delRule/${rule.ruleId}''" +
                                    "data-method='delete' class='btn btn-danger btn-sm'>" +
                                    "<span class='glyphicon glyphicon-remove' aria-hidden='true'></span>" +
                                     "Delete</button></td>" +
                                    "</tr>";
                     $('#records_table').append(row);

                });
    });

The line with the error is

var edtbtn = "<button class='btn btn-primary btn-sm editBtn'" +
                            "onclick='editBtnClick(" + rule.ruleId + ", '" + rule.ruleName + "', '" + rule.ruleDesc "', '" + rule.startDate + "', '" + rule.ruleSeverity + "')'>" +
                            "<span class='glyphicon glyphicon-pencil' aria-hidden='true'></span>" +
                            "Edit</button>";

What is wrong with this and is there a better way to do this? The difference to this question is that I'm trying to appending a row which has a button which has a javascript call to a function given below.

function editBtnClick(id, name, desc, startDate, severity){
    $("#ruleForm").attr("action", "/EmployeeSpringMVC/updRule");
    $("#ruleId").val(id);
    $("#ruleName").val(name);
    $("#ruleDesc").val(desc);
    $("#ruleStartDate").val(startDate);
    $("ruleSeverity").val(severity);
    $("#ruleIdDiv").css("display", "inline");
    $("#updBtn").css("display", "inline");
    $("#subBtn").css("display", "none");
}

I felt this was easier than selecting the data from the HTML page after the button click is recognized in jquery.