title: Bootstrap Dynamically Appended Button Group Not De-Selecting Properly
body: <p>When I have a <a href="https://getbootstrap.com/docs/5.0/components/button-group/" rel="nofollow noreferrer">Bootstrap 5 button group</a>, the code looks as follows:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;btn-group d-flex justify-content-between m-4&quot;&gt;
    &lt;input id=&quot;a&quot; type=&quot;radio&quot; class=&quot;btn-check&quot; name=&quot;btnradio&quot; autocomplete=&quot;off&quot;&gt;
    &lt;label class=&quot;btn btn-outline-primary&quot; for=&quot;a&quot;&gt;Option A&lt;/label&gt;
    &lt;input id=&quot;b&quot; type=&quot;radio&quot; class=&quot;btn-check&quot; name=&quot;btnradio&quot; autocomplete=&quot;off&quot;&gt;
    &lt;label class=&quot;btn btn-outline-primary&quot; for=&quot;b&quot;&gt;Option B&lt;/label&gt;
    &lt;input id=&quot;c&quot; type=&quot;radio&quot; class=&quot;btn-check&quot; name=&quot;btnradio&quot; autocomplete=&quot;off&quot;&gt;
    &lt;label class=&quot;btn btn-outline-primary&quot; for=&quot;c&quot;&gt;Option C&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  <p>This works fine if the group is on the page during pageload. However, if I dynamically append the elements after pageload, the buttons stay &quot;active&quot; once clicked and don't toggle properly.</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>let options = ["D", "E", "F"];
  
  let group = document.createElement('div');
  group.className = 'btn-group d-flex justify-content-between m-4';
  for (let type of options) {
    let button = document.createElement('input');
    button.id = type;
    button.name = type;
    button.type = 'radio';
    button.className = 'btn-check';
    button.autocomplete = 'off';
    group.append(button);
    let label = document.createElement('label');
    label.htmlFor = type;
    label.className = 'btn btn-outline-primary';
    label.innerHTML = 'Option ' + type;
    group.append(label);
  }
  document.body.append(group);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" /&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1 class="m-4"&gt;On Pageload&lt;/h1&gt;
    &lt;div class="btn-group d-flex justify-content-between m-4"&gt;
      &lt;input id="a" type="radio" class="btn-check" name="btnradio" autocomplete="off"&gt;
      &lt;label class="btn btn-outline-primary" for="a"&gt;Option A&lt;/label&gt;
      &lt;input id="b" type="radio" class="btn-check" name="btnradio" autocomplete="off"&gt;
      &lt;label class="btn btn-outline-primary" for="b"&gt;Option B&lt;/label&gt;
      &lt;input id="c" type="radio" class="btn-check" name="btnradio" autocomplete="off"&gt;
      &lt;label class="btn btn-outline-primary" for="c"&gt;Option C&lt;/label&gt;
    &lt;/div&gt;
    &lt;h1 class="m-4"&gt;Dynamically Appended&lt;/h1&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Any idea why this might be?</p>