jQuery referencing a div generated with a partial view to append another partial view
===

I have this partial view rendered multiple times on a page:

    @model POS.Domain.Entities.Category

    <div class = "category" id= "@Model.Name">
        <h2>@Model.Name</h2>
        <a href='javascript:getView();'>Get Partial View</a>
        <script type="text/javascript">
            function getView() {
                $('#divResult').load("@Url.Action("ProductList" , "Product", new {category = Model.Name})");
            }
        </script>
        <div id="divResult">
        </div>
    </div>

The idea is that when someone clicks the `Get Partial View` link, it will load the partial view generated by my `ProductList` action in my `Product` controller using the category value `Model.Name` and append that partial view to the appropriate `divResult` div.

The problem is that after the page has loaded, if a user clicks on any of the `GetPartialView` links, it loads the list of products contained within the final category and appends them to the top-most `divResult` div.

I am hoping for a bit of guidance in changing the script to use jQuery to appropriately load the information.  I also feel that I should not be repeating the script every time this partial view is loaded. . .  So how would I write the appropriate jQuery script that would do the following when the user clicks one of the `Get Partial View` links:

 - get the id of the parent div of the link (`@ModelName`)
 - use that id to make a call to my Action: `@Url.Action("ProductList", "Product", new {category = **that id**})";`
 - append the partial view returned by that Action to a div with the id of `divResult` that is within the parent div we found two steps above this step