title: Selecting a specific element from multiple forms
body: <p>I'm trying to select a specific element from multiple forms but it's not working properly:</p>
  
  <p>So my javascript code is:</p>
  
  <pre><code>function makeActive(target)
  {
      $("div.interactive").removeClass("interactive");
      $("#form" + target).addClass("interactive");
  }
  
  $(document).ready(function () {
      $('.interactive option[name=bu]').on('change', function () {
          $('.interactive option[name=discipline]').empty();
          $('.interactive option[name=project]').empty();
          $('.interactive option[name=role]').empty();
          $.ajax({
              type: 'GET',
              url: '@Url.Action("GetList", "Central")',
              dataType: 'Json',
              data: { InitiateId: $('.interactive option[name=bu]').val(), InitiateType: "BU" },
              success: function (data) {
                  console.log("That was calling")
                  $('.interactive option[name=discipline]').append('&lt;option value=""&gt;Select&lt;/option&gt;');
                  $.each(data, function (index, value) {
                      $('.interactive option[name=discipline]').append('&lt;option value="' + value.Id + '"&gt;' + value.Name + '&lt;/option&gt;');
                  });
                  $('.interactive option[name=project]').append('&lt;option value=""&gt;Select Discipline firt&lt;/option&gt;');
                  $('.interactive option[name=role]').append('&lt;option value=""&gt;Select Project first&lt;/option&gt;');
              },
              error: function (xhr, ajaxOptions, thrownError) {
                  alert(xhr.status);
                  alert(thrownError);
              }
          });
      });
  </code></pre>
  
  <p>And cshtml struct page is: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div id="faq" role="tablist" aria-multiselectable="true"&gt;
          @foreach (var actor in Model)
          {
          string areacontrol = "answer" + actor.Id;
          count +=1;
          bool open = false;
  
          if (ViewBag.actor != null)
          {
          if (actor.Id == ViewBag.actor.Id)
          {
          open = true;
          }
          }
          else
          {
          if (count == 1)
          {
          open = true;
          }
          }
  
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading" role="tab" id="questionOne"&gt;
                  &lt;h5 class="panel-title"&gt;
                      &lt;a data-toggle="collapse" data-parent="#faq" href="#@areacontrol" aria-expanded="false" aria-controls="answerOne"
                          onclick=" makeActive(@actor.Id)"&gt;
                          @actor.Name (@actor.Email)
                      &lt;/a&gt;
                  &lt;/h5&gt;
              &lt;/div&gt;
              &lt;div id="@areacontrol" class="panel-collapse collapse @(open?" in":"")" role="tabpanel" aria-labelledby="questionOne"&gt;
                  &lt;div class="panel-body"&gt;
                      @using (Html.BeginForm("Assign", "Central", FormMethod.Post))
                      {
                      @Html.AntiForgeryToken()
                      @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                      string form = "form" + actor.Id;
                      &lt;div class="row form-group @(open?" interactive":"")" id="@form"&gt;
                          &lt;div class="col-md-3 col-md-offset-0"&gt;
                              &lt;label for="bu"&gt;Business Unit&lt;/label&gt;
                              &lt;select name="bu" class="form-control"&gt;
  
                                  &lt;option value=""&gt;--Select--&lt;/option&gt;
                                  @foreach (var item in flowcontext.ContiBusinessUnits.ToList())
                                  {
                                  if (ViewBag.bu != null &amp;&amp; actor.Id == ViewBag.actor.Id)
                                  {
                                  bool selected = false;
                                  if (ViewBag.bu.Name == item.Name)
                                  {
                                  selected = true;
                                  }
                                  if (selected)
                                  {
                                  &lt;option value="@item.Id" selected&gt;@item.Name&lt;/option&gt;
                                  }
                                  else
                                  {
                                  &lt;option value="@item.Id"&gt;@item.Name&lt;/option&gt;
                                  }
                                  }
                                  else
                                  {
                                  &lt;option value="@item.Id"&gt;@item.Name&lt;/option&gt;
                                  }
                                  }
                              &lt;/select&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-3"&gt;
                              &lt;label for="discipline"&gt;Discipline&lt;/label&gt;
                              &lt;select name="discipline" class="form-control"&gt;
                                  @if (ViewBag.discipline != null &amp;&amp; actor.Id == ViewBag.actor.Id)
                                  {
                                  &lt;option value="@ViewBag.discipline.ID"&gt;@ViewBag.discipline.Name&lt;/option&gt;
                                  }
                                  else
                                  {
                                  &lt;option value=""&gt;Select Business Unit first&lt;/option&gt;
                                  }
                              &lt;/select&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-3"&gt;
                              &lt;label for="project"&gt;Project&lt;/label&gt;
                              &lt;select name="project" class="form-control"&gt;
                                  @if (ViewBag.project != null &amp;&amp; actor.Id == ViewBag.actor.Id)
                                  {
                                  &lt;option value="@ViewBag.project.ID"&gt;@ViewBag.project.Name&lt;/option&gt;
                                  }
                                  else
                                  {
                                  &lt;option value=""&gt;Select Discipline first&lt;/option&gt;
                                  }
                                  ViewBag.role_id = contiRole;
                              &lt;/select&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-3"&gt;
                              &lt;label for="destination"&gt;Role&lt;/label&gt;
                              &lt;select name="role" class="form-control"&gt;
                                  @if (ViewBag.role != null &amp;&amp; actor.Id == ViewBag.actor.Id)
                                  {
                                  &lt;option value="@ViewBag.role.ID"&gt;@ViewBag.role.Name&lt;/option&gt;
                                  }
                                  else
                                  {
                                  &lt;option value=""&gt;Select Project first&lt;/option&gt;
                                  }
                              &lt;/select&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-3" style="display:none"&gt;
                              &lt;label for="destination"&gt;User Id&lt;/label&gt;
                              &lt;select name="userid" class="form-control"&gt;
                                  &lt;option value="@actor.Id" selected&gt;@actor.Name&lt;/option&gt;
                              &lt;/select&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="row form-group"&gt;
                          &lt;div class="col-md-3 col-md-offset-8"&gt;
                              &lt;input type="submit" class="btn btn-primary btn-block" value="Add"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      }
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          }
      &lt;/div&gt;
  
  &lt;!--end language: lang-html --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In that inside a <code>foreach</code> loop, I load/ generate a form.
  First: The bootstrap collapse will be open for the first user(actor);
  Inside, I have a form with is necessary to be similar and be a cascade drop select!</p>
  
  <p>When I make a change[ <code>$('.interactive option[name=bu]').on('change', function (){}</code>]that calls for me a controller method which returns me a list and with that list a generate the second field and again for other 2 field!
  That helps me to make a cascade select for a <code>form</code> and that works well but only for the first one!</p>
  
  <p>I think either I'm not making the selections properly or using <code>ajax, "$ (document) .ready"</code> does not get the data properly.
  How I can select properly or tell others methods!<br>
  How can improve that and make it work for all <code>form</code> elements?</p>