title: how to have 2 autocomplete in 2 different forms on same page bootstrap -3
body: <p>i have 2 tabs on home page and both have search forms with an autocomplete feature for input of location.</p>
  
  <p>html</p>
  
  <pre><code>&lt;div class="row"&gt;
  
                      &lt;div class="col-md-4 scolleft"&gt;
                      &lt;div class="bs-example bs-example-tabs cstyle04"&gt;
  
                  &lt;ul class="nav nav-tabs" id="myTab"&gt;
                      &lt;li onclick="mySelectUpdate()" class="active"&gt;&lt;a data-toggle="tab" href="#weekend"&gt;&lt;span class="flight"&gt;&lt;/span&gt; Weekend Holidays&lt;/a&gt;&lt;/li&gt;
                      &lt;li onclick="mySelectUpdate()" class=""&gt;&lt;a data-toggle="tab" href="#holidays"&gt;&lt;span class="hotel"&gt;&lt;/span&gt;Holidays&lt;/a&gt;&lt;/li&gt;
  
                  &lt;/ul&gt;
  
                  &lt;div class="tab-content2" id="myTabContent"&gt;
                      &lt;div id="weekend" class="tab-pane fade active in"&gt;
                          &lt;form action="" name = "weekend"&gt;
                          &lt;div class="w50percent"&gt;
                              &lt;div class="wh90percent textleft"&gt;
                                  &lt;span class="opensans size13"&gt;&lt;b&gt;Where&lt;/b&gt;&lt;/span&gt;
                                  &lt;input type="text" name="location" class="form-control desktopDropDown autocomplete" id="location" /&gt;
  
                              &lt;/div&gt;
                          &lt;/div&gt;
  
  
  
  
                          &lt;div class="clearfix"&gt;&lt;/div&gt;&lt;br/&gt;
  
                          &lt;div class="w50percent"&gt;
                              &lt;div class="wh90percent textleft"&gt;
                                  &lt;span class="opensans size13"&gt;&lt;b&gt;When&lt;/b&gt;&lt;/span&gt;
                                  &lt;input type="text" class="form-control mySelectCalendar" id="datepicker" name="date" placeholder="mm/dd/yyyy"/&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
  
  
                          &lt;div class="clearfix"&gt;&lt;/div&gt;
                          &lt;div class="w50percent"&gt;
                                  &lt;input type="button"  class="btn-search3"  id="btnSearchHotels" name="btnSearchHotels" value="Search Hotels"   /&gt;&lt;/div&gt;
  
                          &lt;/form&gt;
                          &lt;/div&gt;
  
  
  
  
                          &lt;div id="holidays" class="tab-pane fade active in"&gt;
                          &lt;form name = "holidays" action=""&gt;
                          &lt;div class="w50percent"&gt;
                              &lt;div class="wh90percent textleft"&gt;
                                  &lt;span class="opensans size13"&gt;&lt;b&gt;Where&lt;/b&gt;&lt;/span&gt;
                                  &lt;input type="text" name="location" class="form-control desktopDropDown autocomplete" id="location" /&gt;
  
                              &lt;/div&gt;
                          &lt;/div&gt;
  
  
  
  
                          &lt;div class="clearfix"&gt;&lt;/div&gt;&lt;br/&gt;
  
                          &lt;div class="w50percent"&gt;
                              &lt;div class="wh90percent textleft"&gt;
                                  &lt;span class="opensans size13"&gt;&lt;b&gt;When&lt;/b&gt;&lt;/span&gt;
                                  &lt;input type="text" class="form-control mySelectCalendar" id="datepicker2" name="date" placeholder="mm/dd/yyyy"/&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
  
  
                          &lt;div class="clearfix"&gt;&lt;/div&gt;
                          &lt;div class="w50percent"&gt;
                                  &lt;input type="button"  class="btn-search3"  value="Search Holiday"   id="btnSearchHolidays" name="btnSearchHolidays"    /&gt;
                          &lt;/form&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>Autocomplete works fine in tab 1 but all the inputs for form 2 shows error.
  i am aware of changing id to autocomplete2 but i donot know jquery/ js to impement it. kindly also tell in which js files changes needs to be made.
  Thanks in Advance</p>