title: Update array based on button selections
body: <p>I have a menu of buttons and am trying to record which buttons a user selects. The user can select multiple buttons before they submit their answer by clicking on the done button. They can change their mind by unclicking selections, but their final answer should be submitted upon clicking the done button.</p>
  <p>Currently, I'm able to record multiple button selections by pushing to an array upon each click. However, if a user <em>unclicks</em> a button, I have not been able to figure out how to update my array. For example, if a user clicks A, B, A. It will unselect A, but the array still records [&quot;A&quot;, &quot;B&quot;] when it should instead record [&quot;B&quot;]. Does anyone what I am doing wrong?</p>
  <p>It's unclear to me whether selections are recorded based on clicks or buttons have the class 'selected' from (let syms = document.querySelectorAll('.selected'). Many thanks in advance!</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;html lang="en" dir="ltr"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;style media="screen"&gt;
      .buttons {
        width: 150px;
        height: 50px;
        border: solid 2px black;
        text-align: center;
        color: black;
        cursor: pointer;
        background-color: white;
        margin: 2px;
      }
  
      #buttonGallery {
        margin: 10px;
        padding: 10px;
        border: solid 2px black;
        width: 155px;
      }
  
      #done {
        width: 150px;
        height: 50px;
        border: solid 2px black;
        text-align: center;
        color: black;
        cursor: pointer;
        background-color: white;
        margin: 2px;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="buttonGallery"&gt;
      &lt;div id="done"&gt;
        &lt;p&gt;done&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;script type="text/javascript"&gt;
      let $buttonGallery = $("#buttonGallery");
      let myList = ["A", "B", "C", "D"];
      let myColors = ["red", "green", "blue", "red"];
      let clicked = [];
  
      myList.map(function(letter, index) {
        let clicked = [];
        let $button = $("&lt;div&gt;&lt;/div&gt;")
          .addClass("buttons")
          .attr("id", "button_" + letter)
          .html("&lt;p&gt;" + letter + "&lt;/p&gt;")
          .on("mouseenter", function() {
            $(this).css("background", myColors[index]);
          })
          .on("mouseleave", function() {
            if (!$(this).hasClass('selected')) {
              $(this).css("background", "transparent");
            }
          })
          .on("click", function() {
            $(this).css("background", myColors[index]);
            $(this).toggleClass('selected');
  
            // push clicked variables to array
            let syms = document.querySelectorAll('.selected');
  
            for (let n = 0; n &lt; syms.length; n++) {
              if (!clicked.includes(syms[n].textContent)) {
                clicked.push(syms[n].textContent);
              }
            };
  
            // send data to server
            console.log('clicked array', clicked);
          })
        $("#done").before($button);
      });
  
      $("#done").on("click", clearColor);
  
      function clearColor() {
  
        $(".buttons").css({
          backgroundColor: 'transparent'
        });
        $(".buttons").removeClass('selected');
  
        // reset clicked list
        clicked = [];
      }
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/script&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>