How to show color on box after clicking color name

I want to show the color on color box after clicking the color name.

Here is my javascript code so far and also HTML and css code.
i tried take value but its not working , i don’t know how to take this value. you must create one event handler and assign it too all 3
buttons. Your code should be written as the last examples that we have done in
class. Assign the event handler through the CLASS, but use the ID to distinguish
which button got clicked on.

$(document).ready(function() {
  $(".colorbutton").on("click", function() {
    var colorid = $(this).attr("id");

    $("#output").stop(true, true).hide().html(color).stop(true, true).show("fade", 1500);
  }); // end event handler
}); // ends document.ready
body {
  background-image: url("https://newton.ncc.edu/gansonj/ite154/img/crayons.jpg");
  font-family: arial;
  text-align: right;
  color: #008B8B;
}

#pagewrap {
  border: 8px #800000 solid;
  padding: 10px;
  width: 600px;
  border-radius: 25px;
  text-align: center;
  background: white;
  margin: 40px auto 0px auto;
}

#title {
  font-size: 2.2em;
  border-bottom: 7px #008B8B double;
  padding: 10px 0px 10px 0px;
  color: #008B8B;
  text-align: center;
}

#formtext {
  text-align: center;
  font-size: 1.29em;
  margin-top: 20px;
}

#usergrade {
  text-align: center;
  margin: 5px 20px 10px 20px;
}

.colorbutton {
  color: white;
  cursor: pointer;
  padding: 5px 0px 5px 0px;
  border: 3px solid #CCCC99;
  border-radius: 25px;
  width: 150px;
}

.colorbutton:hover {
  background: #CCCCCC;
  color: yellow;
  border: 3px solid #003366;
}

#output {
  font-size: 5em;
  padding-top: 100px;
  width: 200px;
  height: 100px;
  margin: 30px auto 30px auto;
  border: 5px black double;
  font-size: 1em;
  font-family: arial;
}
<html>

<head>
  <title></title>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

</head>

<body>

  <div id="pagewrap">

    <div id="title">Crayon Color Factory</div>

    <div id="formwrap" style="margin-top: 30px;">

      <input type="button" class="colorbutton" id="red" style="background-color:red;" value="RED Color">
      <input type="button" class="colorbutton" id="blue" style="background-color:blue;" value="BLUE Color">
      <input type="button" class="colorbutton" id="green" style="background-color:green;" value="GREEN Color">

      <div id="output">Change Me!!!!!</div>

    </div>
    <!-- ends div#formwrap -->

  </div>
  <!-- ends div#pagewrap -->

</body>

</html>

smaple picture here: enter image description here