show/hide content of partial view dynamically based on button click in main view

I want to show/hide content from partial view dynamically based on Select button click in main view.

  1. If I click on Catalogue Style Unedited in main view, then from the partial view, the Horse (1st) radio button should be selected along with 1st textbox and the rest content will be hidden.
  2. If I click on Internet Pedigree in main view the Dam (2nd) radio button with 2nd textbox will be visible and the and the rest content will be hidden.
  3. If I click on Research Document in main view the Theoretical (3rd) radio button will be selected and both textboxes will be visible

My model:

public class ClsTest
{        
    public int HorseId { get; set; }
    public string Horse { get; set; }
    public int DamId { get; set; }
    public string Dam { get; set; }
    public int TheoreticalId { get; set; }
    public string Theoretical { get; set; }  
}

my main View:

@model IEnumerable<Test.Website.Models.ClsTest>
<table id="tblTest">
    <tr>
        <th>@Html.DisplayNameFor(m => m.ProductName)</th>
        ....
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>@Html.DisplayFor(modelItem => item.ProductName)</td>
            ....
            <td>
                <input class="search btn-default" type="button" value="Select" data-assigned-id="@item.ProductCode" />
            </td>
        </tr>
    }

</table>
<script type="text/javascript">
    $("document").ready(function() {
        $('#Partial').on('change', '.AddContainer input[type="radio"]', function()  {     
            var divs = $('.Add1').find('.container');
            var id = $(this).data('divid');
            divs.hide(); 
            $('#' + id).show();
        });

        $('.search').click(function () {
            var id = $(this).data('assigned-id');
            var route = '@Url.Action("DisplayPartialView", "Home")?id=' + id;
            $('#Partial').load(route);
        });
    });
</script>

My JavaScript:

My main view Image: enter image description here My partial view:

<div class="AddContainer">
    <div class="col-sm-12">
        <label>
            <input type="radio" name="Service" value="false" data-divid="A" checked />
            <span>Horse</span>
        </label>
        <label>
            <input type="radio" name="Service" value="true" data-divid="B" />
            <span>Dam</span>
        </label>
        <label>
            <input type="radio" name="Service" value="true" data-divid="C" />
            <span>Theoretical</span>
        </label>
    </div>
</div>
<div class="Add1">
    <div class="form-inline">
        <div id="A" class="container">
            <div class="col-sm-4">
                @using (Html.BeginForm("Index", "Home", FormMethod.Get))
                {
                    @Html.TextBoxFor(m => m.Horse, new { @class = "form-control", placeholder = Html.DisplayNameFor(n => n.Horse) })
                    @Html.HiddenFor(m => m.HorseId)
                    <input type="button" value="Search" class="btn btn-default active" />
                }
            </div>
        </div>
        <div id="B" class="container">
            <div class="col-sm-4">
                @Html.TextBoxFor(m => m.Dam, new { @class = "form-control", 
                 placeholder = Html.DisplayNameFor(n => n.Dam) })
                @Html.HiddenFor(m => m.DamId)
                <input type="button" value="Search" class="btn btn-default 
                   active" />
            </div>
        </div>
        <div class="col-sm-12">
            <input type="submit" value="Produce Page" class="btn btn-default 
             active" />
        </div>
    </div>
</div>

Can we achieve this? Anyone please guide me if we can then. Thank you.