title: How to turn on specific elements inside Button-group with javascript/jquery
body: <p>I have a btn-group inside the form to select between the 7 days of the week, the method is already working for create and edit forms... but in the Get view from the Edit I need to &quot;Turn-on&quot; the buttons that are already coming true from the object in the controller... I tried several ways ( you will see in the code, but with no success ) This is already working, but I need to show the corresponding buttons turned on in the document.ready side...</p>
  <p>my code:</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-js lang-js prettyprint-override"><code>&lt;script type="text/javascript"&gt;
         $('#genreButtons')
              .on('click', 'button', function (event) {
                  //  console.log("T:", this);
                  $(this).toggleClass("we-selected");
                  // console.log("T after:", this);
                  // console.log('click:', $(this).text(), $(this).data('value'));
                  let buttonValues = [];
                  let buttonObjects = [];
                  let buttons = $(event.delegateTarget).find('button');
                  console.log("We have " + buttons.length + " buttons");
                  let weSelectedButtons = buttons.filter('.we-selected');
                  console.log("We selected " + weSelectedButtons.length + " buttons");
                  weSelectedButtons
                      .each(function (index, element) {
                          buttonValues.push($(element).data('value'));
                          buttonObjects.push({
                              name: $(element).text(),
                              value: $(element).data('value')
                          });
                      });
                  console.log("Values:", buttonValues);
                  console.log("Objects:", buttonObjects);
  
                  $('input[name="valueGenre"]').val(buttonValues.join(','));
                  $('#debug').html(buttonValues.join(','));
  
                  $('#DaysSelected').val(buttonValues.join(','));
                  $('#DaysSelected').html(buttonValues.join(','));
                  //document.getElementById("DaysSelected").value = aux;
              });
      &lt;/script&gt;
  
      &lt;script&gt;
          $(document).ready(function () {
              var mon = document.getElementById("Monday").value;
              if (mon == "True")
              {
                  //document.getElementById("genre0").buttonValues.val = true;
                  document.getElementById("genre0").removeClass("active");
                  document.getElementById("genre0").addClass("active");
              }
  
              var sun = document.getElementById("Sunday").checked; //Better
              if (sun == true)
              {
                  //document.getElementById("genre0").buttonValues.val = true;
              }
          });
  
      &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>                   &lt;div class="wrapper wrapper-content animated fadeInRight"&gt;
      &lt;form asp-action="Edit"&gt;
          &lt;div class="row"&gt;
                     &lt;input type="hidden" asp-for="Monday" /&gt;
              &lt;input type="hidden" asp-for="Tuesday" /&gt;
              &lt;input type="hidden" asp-for="Wednesday" /&gt;
              &lt;input type="hidden" asp-for="Thursday" /&gt;
              &lt;input type="hidden" asp-for="Friday" /&gt;
              &lt;input type="hidden" asp-for="Saturday" /&gt;
              &lt;input type="hidden" asp-for="Sunday" /&gt;
  
  
              &lt;div class="col-lg-12"&gt;
                  &lt;div class="ibox "&gt;
                      &lt;div class="ibox-title"&gt;
                          &lt;h5&gt;&lt;/h5&gt;
                          &lt;div class="ibox-tools"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="ibox-content"&gt;
                         &lt;div class="btn-group d-flex w-100" id="genreButtons"&gt;
                              &lt;button class="btn btn-outline-info" data-toggle="button" data-value="0" name="genre0" id="genre0" type="button"&gt;Monday&lt;/button&gt;
                              &lt;button class="btn btn-outline-info" data-toggle="button" data-value="1" name="genre1" id="genre1" type="button"&gt;Tuesday&lt;/button&gt;
                              &lt;button class="btn btn-outline-info" data-toggle="button" data-value="2" name="genre2" id="genre2" type="button"&gt;Wednesday&lt;/button&gt;
                              &lt;button class="btn btn-outline-info" data-toggle="button" data-value="3" name="genre3" id="genre3" type="button"&gt;Thursday&lt;/button&gt;
                              &lt;button class="btn btn-outline-info" data-toggle="button" data-value="4" name="genre4" id="genre4" type="button"&gt;Friday&lt;/button&gt;
                              &lt;button class="btn btn-outline-info" data-toggle="button" data-value="5" name="genre5" id="genre5" type="button"&gt;Saturday&lt;/button&gt;
                              &lt;button class="btn btn-outline-info" data-toggle="button" data-value="6" name="genre6" id="genre6" type="button"&gt;Sunday&lt;/button&gt;
                          &lt;/div&gt;
                          &lt;input name="valueGenre" value="" hidden /&gt;
                          &lt;div id="debug" hidden&gt;&lt;/div&gt;
                          &lt;div class="form-group" hidden&gt;
                              &lt;label asp-for="DaysSelected" class="control-label col-lg-3 col-md-3 col-sm-3 col-xs-12"&gt;&lt;/label&gt;
                              &lt;div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"&gt;
                                  &lt;textarea rows="2" draggable="false" maxlength="400" asp-for="DaysSelected" class="form-control"&gt;&lt;/textarea&gt;
                                  &lt;span asp-validation-for="DaysSelected" class="text-danger"&gt;&lt;/span&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-12"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;div class="col-md-6 col-md-offset-3"&gt;
                          &lt;a asp-action="Index" class="btn btn-warning"&gt;Back&lt;/a&gt;
                          &lt;input type="submit" value="Save" class="btn btn-primary" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>