I have developed an ASP.NET MVC application and am facing an issue with translating the functionality I have implemented in Razor to JavaScript. In the example below, I have successfully created three buttons in Razor with a working script. However, when I tried to replicate the same functionality using a helper in JavaScript, the script within the script did not work properly. Additionally, there seems to be an issue with the recognition of the bootstrap layout containers. How can I resolve this issue and correctly implement the functionality in JavaScript?
Razor (working well)
panelbar.Add().Text("Third Person")
.Content(@<div style="padding: 10px;">
<div id="cont5_container" class="container">
<span class="label label-primary">Age</span>
<br />
<br />
<div class="btn-group" id=ageID2>
<button type="button" style="width:120px" class="btnMyAge5 btn-default" id="3">Under 10</button>
<button type="button" style="width:120px" class="btnMyAge5 btn-default" id="1">Under 50</button>
<button type="button" style="width:120px" class="btnMyAge5 btn-default" id="2">Over 50</button>
@Html.TextBoxFor(m => m.ageID, new { @class = "input k-textbox", id = "MyAge5", Value = "", style = "width: 50px;" })
</div>
<script>
$(".btn-group > .btnMyAge5").click(function () {
$(this).addClass("active").siblings().removeClass("active");
document.getElementById('MyAge5').value = $(this).attr("id");
})
</script>
</div>
</div>);
JavaScript (Can't be correct)
<script type="text/javascript">
function OnClickAdd() {
$("#panelbar").kendoPanelBar();
var panelBar = $("#panelbar").data("kendoPanelBar");
panelBar.append(
{
text: "New Person",
encoded: true,
content: [
'<div id="cont6_container" class="container">',
'<span class="label label-primary">Age</span>',
'<br /><br />',
'<div class="btn-group" id=ageID>',
'<button type="button" style="width:120px" class="btnMyAge3 btn-default" id="3">Under 10</button><button type="button" style="width:120px" class="btnMyAge3 btn-default" id="1">Under 50</button><button type="button" style="width:120px" class="btnMyAge3 btn-default" id="2">Over 50</button>',
'@Html.TextBoxFor(m => m.ageID, new { @class = "input k-textbox", id = "MyAge3", Value = "", style = "width: 50px;" })',
'</div>',
'</div>'
]
}
)
}
<script>
$(".btn-group > .btnMyAge3").click(function () {
$(this).addClass("active").siblings().removeClass("active");
document.getElementById('MyAge3').value = $(this).attr("id");
})