I have a list of buttons. Here, I display my buttons using a map function since the number of buttons is determined by the number of elements in a list, e.g., "myList" has 4 letters. However, in other cases, the lists will contain a different number of letters. 

The buttons are also colored based on the another list called "myColors" and this can also change in other cases. 

However, I will always show the button "done" at the bottom of the button menu, although the length of the list will vary by case. I'd like this button to be placed in the same menu (#buttonGallery) so that the formatting is consistent. Does anyone know how to do insert the "done" button into the map function? 

Many thanks in advance! (Any advice on editing this post to be more clear would also be appreciated.)

Code below: (for now, you can see that I directly set the position of the "done" button)

```
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style media="screen">
    .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;
    }
  </style>
</head>

<body>

  <div id="done">
    <p>done</p>
  </div>

  <script type="text/javascript">
    let $buttons = $('<div id="buttonGallery">');
    let myList = ["A", "B", "C", "D"];
    let myColors = ["red", "green", "blue", "red"];

    myList.map(function(letter, index) {
      let $button = $("<div></div>")
        .addClass("buttons")
        .attr("id", "button_" + letter)
        .html("<p>" + letter + "</p>")
        .on("mouseenter", function() {
          $(this).css("background", myColors[index]);
        })
        .on("mouseleave", function() {
          if (!$(this).hasClass('clicked')) {
            $(this).css("background", "transparent");
          }
        })
        .on("click", function() {
          $(this).css("background", myColors[index]);
          $(this).addClass('clicked');
        })
      $buttons.append($button);
    });

    $("body").append($buttons);

    $("#done").on("click", clearColor);

    function clearColor() {
      $(".buttons").css({
        backgroundColor: 'transparent'
      });
      $(".buttons").removeClass('clicked');
    }
  </script>
</body>

</html>

```

Here's what I hope the result to look like: 
[![enter image description here](https://i.stack.imgur.com/9HeCc.png)](https://i.stack.imgur.com/9HeCc.png)