Simplifying jquery

Question

I´m trying to simplify my jquery so I don´t have to make it so long. I got 3 boxes and I want to be able to change the color of each box independently. But without the need to put in jquery for each box separately. (At the moment only .profile1 (box) changes color from the dropdown menu).

html

<div class="profile1"></div>

<div class="profile2"></div>

<div class="profile3"></div>

<div class="overlay"></div>

<div class="popup">
<select class="dropdown" id="cp">
<option id="red"> red </option>
<option id="yellow"> yellow </option>
<option id="blue"> blue </option>
</select>
<a class="close" onclick="hidePopup()" href="">CLOSE</a>
<input onclick="hidePopup()" type="submit" value="SUBMIT" id="submit" class="submit">
</div>

css

.profile1 {
margin-left: 1.7%;
margin-top: 6%;
height: 40%;
width: 18%;
background-color: #0D7BFF;
position: absolute;
z-index: -1;
border-radius: 2px;
}

.profile2 {
margin-left: 21.4%;
margin-top: 6%;
height: 40%;
width: 18%;
background-color: #0D7BFF;
position: absolute;
z-index: -1;
border-radius: 2px;
}

.profile3 {
margin-left: 41.1%;
margin-top: 6%;
height: 40%;
width: 18%;
background-color: #0D7BFF;
position: absolute;
z-index: -1;
border-radius: 2px;
}

.student-name {
color: #FDFDFD;
font-size: 1.2vw;
text-align: center;
margin-top: 10%;
}

.overlay {
top: 0%;
left: 0%;
width: 100%;
height: 100%;
position: absolute;
background-color: #555454;
opacity: 0.80;
z-index: 2;
}

.popup {
top: 20%;
left: 27.5%;
height: 17%;
width: 45%;
background-color: #FDFDFD;
position: absolute;
border-radius: 5px;
z-index: 3;
-webkit-box-shadow: 0px 0px 10px 3px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 10px 3px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 10px 3px rgba(50, 50, 50, 0.75);
}

#submit {
background: #0D7BFF;
border: none;
cursor: pointer;
color: #FDFDFD;
font-size: 1.8vw;
font-family: Avenir Next;
width: 50%;
right: 0%;
bottom: 0%;
top: 76.5%;
position: absolute;
border-radius: 0px 0px 5px 0px;
text-align: center;
}

#submit:hover {
background-color: #004598;
transition: all 0.3s ease-out;
}

.close {
background: #0D7BFF;
border: none;
cursor: pointer;
color: #FDFDFD;
font-size: 1.8vw;
font-family: Avenir Next;
width: 50%;
left: 0%;
bottom: 0%;
top: 76.5%;
position: absolute;
border-radius: 0px 0px 0px 5px;
text-decoration: none;
text-align: center;
}

.close:hover {
background-color: #004598;
transition: all 0.3s ease-out;
}

jquery

$(document).ready(function() {

$('.popup,.overlay').hide();

$(".profile1").click(function() {
$(".popup, .overlay").show(300);
});

});

$(document).mouseup(function(e) {
var popup = $(".popup");
if (!$('.popup').is(e.target) && !popup.is(e.target) &&  popup.has(e.target).length === 0) {
hidePopup();
}
});

function hidePopup() {
$(".popup, .overlay").hide(300).fadeOut();
}


$(document).ready(function() {
$(".submit").click(function() {
var element = document.getElementById("cp");
$(".profile1").css({
  "background-color": element.options[element.selectedIndex].id
});
});

});

I appreciate all help

Answer 1

This is what I would do:

Add a variable var active;

Change this:

$(".profile1").click(function() {
   $(".popup, .overlay").show(300);
});

to this:

  $("[class*='profile']").click(function() {
    $(".popup, .overlay").show(300);
    active = $(this);
  });

and change this:

$(".profile1").css({

to this:

active.css({

Here is the JSFiddle demo

Answer 2

Just call this method and give it the element and then it gets the value of the id which is as example red and saves it in a variable. Then you set the color of the element you gave the function at the call the value (which has to be a color):

function changeColor(this){
 var val = this.attr('id');
 this.css('background-color', val);
}

This method you can call in a foreach-loop.

$('.dropdown').children('option').each(function () {
    changeColor(this);
});