Partial View append not working

HI
Attachment: PartialViewJqueryappend_ad261e2.rar

<div id="cn"></div>    <ejs-button id="primarybtn" content="Click" isPrimary="true" onclick="clickAjax()"></ejs-button>    <script>      function clickAjax() {          var ajax = new ej.base.Ajax('/home/about', 'GET', true);            ajax.send().then(function (result) {              $('#cn').append(result);          });;      }  </script>

This is what i want to achieve. I have one datepicker available on page. I want to add as many datepickers as I want on click of button. I wan to create array of datepickers

@{      for (var i = 0; i <= 10; i++)      {          var ID = Guid.NewGuid().ToString();          <div>              <h6>Essential JS 2 Datepicker component</h6>              <ejs-datepicker id="@("date" + ID.Substring(0,5))" placeholder="Choose a Date"></ejs-datepicker>          </div>      }      <br />  }

<div id="cn">      @Html.Partial("about")  </div>  <div id="dynamic"></div>  <ejs-button id="primarybtn" content="Click" isPrimary="true" onclick="clickAjax()"></ejs-button>  <script>      function clickAjax() {          var ajax = new ej.base.Ajax('/home/about', 'GET', true);            ajax.send().then(function (result) {              $('#dynamic').append(result);          });;      }  </script>

Thank you for your feedback.

@{      IDictionary<string, object> htmlAttr = new Dictionary<string, object>();      htmlAttr.Add("name", string.Format("{0}_{1}_{2}", "ItemDetails_", Guid.NewGuid().ToString(), "_MyTime"));  }  <h6>Essential JS 2 TextBox component</h6>  <ejs-timepicker id="time" htmlAttributes="htmlAttr"></ejs-timepicker>

The solution you provided a little overkill specially if datepicker are all around you app.Is there a solution if i use inputbox and attached datepicker in javascript such as given in your javascript demo. i think code will be much cleaner i will use asp-for to generate my required IDs and names

@{      for (var i = 0; i <= 5; i++)      {          var Date_ID = Guid.NewGuid().ToString();          <div>              <h6>Essential JS 2 Datepicker component</h6>              <input type="text" id="@("ItemDetails_" + Date_ID.Substring(0,5) + "__MyDate")" />          </div>          <script>            var datepicker = new ej.calendars.DatePicker();          datepicker.appendTo("#@("ItemDetails_" + Date_ID.Substring(0,5) + "__MyDate")");          </script>        }      <br />  }

Thank you my issue is resolved