title: chosen-select dropdown not working by jquery MVC
body: <p>I'm using dropdown with multiple select with groups in my mvc razor page. I'm following below link and using <strong>Multiple Select with Groups</strong> dropdown.</p>
  
  <p><a href="https://harvesthq.github.io/chosen/http://" rel="nofollow noreferrer">Harvest Multiselect Dropdown Link</a></p>
  
  <p>It is working fine if I implement in razor view like below sample:</p>
  
  <pre><code>....
  &lt;select data-placeholder="Search option" id="Mainlist[0].SubList" class="chosen-select" multiple tabindex="6" name="MainList[0].SubList"&gt;
       &lt;option value=""&gt;&lt;/option&gt;
       @foreach (var mainListItem in Model.MainList)
       {
            &lt;optgroup label="@mainListItem.Name"&gt;
             @foreach (var subListItem in mainListItem.SubList)
             {
                 &lt;option id="report"&gt;@subListItem.Name&lt;/option&gt;
             }
             &lt;/optgroup&gt;
        }
  &lt;/select&gt;
  ....
  </code></pre>
  
  <p>Above razor code for chosen dropdown working fine like in below image:
  <a href="https://i.stack.imgur.com/zm47I.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zm47I.jpg" alt="razor chosen-select dropdown"></a></p>
  
  <p>But I have a requirement to add more multi select dropdowns on button click event of jquery. I tried below code in jquery:</p>
  
  <pre><code>var newRow =
  "&lt;select data-placeholder='Search option' id='Mainlist[1].SubList' class='chosen-select' multiple tabindex='6' name='MainList[1].SubList'&gt;" +
          "&lt;option value=''&gt;&lt;/option&gt;" +
          "&lt;optgroup label='Main List Item 1'&gt;" +
          "&lt;option id='report'&gt;Sub List Item 1.1&lt;/option&gt;" +
          "&lt;option id='report'&gt;Sub List Item 1.2&lt;/option&gt;" +
          "&lt;/optgroup&gt;" +
          "&lt;optgroup label='Main List Item 2'&gt;" +
          "&lt;option id='report'&gt;Sub List Item 2.1&lt;/option&gt;" +
          "&lt;option id='report'&gt;Sub List Item 2.2&lt;/option&gt;" +
          "&lt;/optgroup&gt;" +
          "&lt;/select&gt;";
  
  $('#TestTable tr:last').after(newRow);
  </code></pre>
  
  <p>First problem is : I can't implement foreach loop in newRow variable.
  Second one is : If I try to manage whole list manually like above code, then also List is not coming properly like below image:
  <a href="https://i.stack.imgur.com/E5Bhn.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E5Bhn.jpg" alt="jquery chosen-select dropdown"></a></p>
  
  <p>Any idea what is causing it? and how can I make dropdown working by jquery? or is there any other way to add same dropdown by jquery?</p>
  
  <p>I already tried $(".chosen-select").chosen() from below link:</p>
  
  <p><a href="https://stackoverflow.com/questions/20811270/chosen-jquery-plugin-basic-ui-does-not-work">chosen-select link</a></p>