Bind (Populate) Table row based on DropDownList selection using jQuery AJAX in ASP.Net MVC

Well I'm new in Asp.net MVC and facing problem. I have two dropdown lists "Company" and "Product" When I select company and one of it's product it appears in below table using jquery. Now I want to show it's quantity and price of selected product as well from database. I'm doing this.

Here is my Controller Code

[Authorize]
[AllowAnonymous]
public ActionResult Details()
{
    ViewBag.Companies = db.Companies.ToList();
    return View();
}
private IList<Product> GetProduct(int CompanyId)
{
    var data = db.Products.Where(m => m.CompanyId == CompanyId).ToList();
    return data;
}

[AcceptVerbs(HttpVerbs.Get)]
public JsonResult LoadProductsByCompanyId(string CompanyId, string cn)
{
    Cname = cn;
    var ProductList = this.GetProduct(Convert.ToInt32(CompanyId));
    var ProductsData = ProductList.Select(m => new SelectListItem()
    {
        Text = m.ProductName,
        Value = m.ProductId.ToString(),
    });
    return Json(ProductsData, JsonRequestBehavior.AllowGet);
}

[AcceptVerbs(HttpVerbs.Post)]
public JsonResult GetProductById(string ProductId)
{
    sampledb4Entities db = new sampledb4Entities();
    int pid = Convert.ToInt32(ProductId);
    var Product = db.Products.Where(x => x.ProductId == pid).SingleOrDefault();
    return Json(Product, JsonRequestBehavior.AllowGet);
}

And Here is my View Code

<script>
    $("#ddProduct").change(function () {
        var trr = document.createElement("tr");
        $(trr).append("<td>" + $("#dd_Company option:selected").text() + "</td>").append("<td>" + $("#ddProduct option:selected").text() + "</td>");
        $(".producttable").append(trr);
    });
</script>

<script>
    $("#ddProduct").change(function () {
        var pid = $(this).val();
        var model = { ProductId: pid };
        $.ajax({
            type: "Post",
            Url: "/UserLogin/GetProductById",
            dataType: "JSON",
            contentType: "application/JSON;charset=utf-8",
            data: JSON.stringify(model),
            cache: false,
            success: function (data) {
                var trr = document.createElement("tr");
                $(trr).append("<td>" + $("#dd_Company option:selected").text() + "</td>").
                    append("<td>" + ProductQuantity + "</td>").
                    append("<td>" + ProductPrice + "</td>");
                $(".producttable").append(trr);
            }
        })
    });
    </script>

<div class="producttable">
    <table>
        <tr>
            <th>@Html.DisplayNameFor(model => model.CompanyName)</th>
            <th>@Html.DisplayNameFor(model => model.ProductName)</th>
            <th>Product Quantity</th>
            <th>Product Price</th>
        </tr>
    </table>
</div>