Submit color depending on chosen div - php

Question

This is what I have so far - JSFiddle
I want to submit the data from the form to the database and was wondering if there is any way with the code I have to submit the selected color of the note depending on the color the user has chosen.
I know how to use $_POST['x']; and all but to get the data from the clicked color div I am unsure of. Any help would be amazing!
$(document).ready(function() {
/* Listening for keyup events on fields of the "Add a note" form: */
$('.pr-body,.pr-author').on('keyup', function(e) {
if (!this.preview)
this.preview = $('.previewNote');
/* Setting the text of the preview to the contents of the input field, and stripping all the HTML tags: */
this.preview.find($(this).attr('class').replace('pr-', '.')).html($(this).val().replace(/<[^>]+>/ig, ''));
});
/* Changing the color of the preview note: */
$('.color').on('click', function() {
$('.previewNote').removeClass('yellow blue pink').addClass($(this).attr('class').replace('color', ''));
});
});
.note-wrapper {
position: relative;
height: 150px;
width: 150px;
float: left;
margin: 5px;
}
.note {
height: 150px;
padding: 5px;
width: 150px;
overflow: hidden;
font-family: Trebuchet MS, Tahoma, Myriad Pro, Arial, Verdana, sans-serif;
font-size: 18px;
-moz-box-shadow: 2px 2px 0 #333;
-webkit-box-shadow: 2px 2px 0 #333;
box-shadow: 2px 2px 0 #333;
}
.pink {
background-color: #ff99ff;
border: 1px solid #e589e5;
}
.yellow {
background-color: #FDFB8C;
border: 1px solid #DEDC65;
}
.blue {
background-color: #A6E3FC;
border: 1px solid #75C5E7;
}
.author {
bottom: 5px;
color: #666666;
font-family: Arial, Verdana, sans-serif;
font-size: 12px;
position: absolute;
right: 8px;
}
.note-form label {
display: block;
font-size: 10px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
padding-bottom: 3px;
}
.note-form textarea,
.note-form input[type=text] {
background-color: #FCFCFC;
border: 1px solid #AAAAAA;
font-family: Arial, Verdana, sans-serif;
font-size: 16px;
height: 60px;
padding: 5px;
width: 300px;
margin-bottom: 10px;
}
.note-form input[type=text] {
height: auto;
}
.color {
/* The color swatches in the form: */
cursor: pointer;
float: left;
height: 10px;
margin: 0 5px 0 0;
width: 10px;
}
#note-submit {
margin: 20px auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="note-wrapper">
<div id="previewNote" class="previewNote note yellow" style="left:0;top:65px;z-index:1">
<div class="body"></div>
<div class="author"></div>
<span class="data"></span>
</div>
</div>
<form action="post.php" method="post" id="note-form" class="note-form">
<label for="note-body">Text of the note</label>
<textarea name="note-body" id="note-body" class="pr-body" cols="30" rows="6"></textarea>
<label for="note-name">Your name</label>
<input type="text" name="note-name" id="note-name" class="pr-author" value="" />
<label>Color</label>
<!-- Clicking one of the divs changes the color of the preview -->
<div class="color yellow"></div>
<div class="color blue"></div>
<div class="color pink"></div>
<button id="note-submit" class="remodal-confirm">Submit</button>
</form>

Answer 1

Add a hidden input with name say color.
On click of color update the color value (as pointer out in the comment .css will return RGB not Hex) of the color you are chosing as value to the hidden input of the form.
On submit you have your chosen color - on your server side you can access the color value with the name of the input like any other string
Updated fiddle https://jsfiddle.net/5erjuo7o/
Note: add hidden attribute to the
<input name="note-color" hidden type="text"/><!-- to hide from view of the form-->