title: Hide and Show Elements Based on Date Change from DatePicker
body: <p>The following solution works, but I would like to keep adding elements for the entire month.</p>
  <p>When I remove the dates that are =&quot;none&quot; the previous dates start stacking on top of each other.</p>
  <p>Is there a way to simplify the javascript so I wouldn't have to keep adding each date to the if-else statements to hide and show them?</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>function selectDate() {
              var x = document.getElementById("start").value;
              if (x == "2022-03-21") {
                  document.getElementById("2022-03-21").style.display = "flex";
                  document.getElementById("2022-03-22").style.display = "none";
                  document.getElementById("2022-03-23").style.display = "none";
              }
              else if (x == "2022-03-22") {
                  document.getElementById("2022-03-22").style.display = "flex";
                  document.getElementById("2022-03-21").style.display = "none";
                  document.getElementById("2022-03-23").style.display = "none";
              }
              else if (x == "2022-03-23") {
                  document.getElementById("2022-03-23").style.display = "flex";
                  document.getElementById("2022-03-21").style.display = "none";
                  document.getElementById("2022-03-22").style.display = "none";
              }
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;section&gt;
          &lt;div class="container "&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col"&gt;
                      &lt;input type="date" id="start" onchange="selectDate()"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row" id="2022-03-21" style="display: none;"&gt;
                  &lt;div class="col"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col"&gt;
                              &lt;h4&gt;1&lt;/h4&gt;
                          &lt;/div&gt;
                          &lt;div class="col"&gt;
                              &lt;h4&gt;2&lt;/h4&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row" id="2022-03-22" style="display: none;"&gt;
                  &lt;div class="col"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col"&gt;
                              &lt;h4&gt;3&lt;/h4&gt;
                          &lt;/div&gt;
                          &lt;div class="col"&gt;
                              &lt;h4&gt;4&lt;/h4&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row" id="2022-03-23" style="display: none;"&gt;
                  &lt;div class="col"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col"&gt;
                              &lt;h4&gt;5&lt;/h4&gt;
                          &lt;/div&gt;
                          &lt;div class="col"&gt;
                              &lt;h4&gt;6&lt;/h4&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>