Jquery Add class only one clicked element - html

Question

Hi i am going to create small app, using jquery, but I have problem and can't solve it, when i will click on number box i want to select only one, but now it selects multiple boxes, for example if i click on 36 and then click to 41 it will select both of them, i want to select last one :/ any solution?
$(".checkbox_child").click(function(){
$(this).toggleClass("clickedcolor")
})
.checkbox_child:not(:first-child){
margin-left: 15px;
}
.checkbox_child span{
font-family: firagoregular;
font-size: 24px;
}
.clickedcolor{
color: #056304;
border-color: #056304;
}
.checkbox_main_header p{
font-family: firagomedium;
color: #707070;
opacity: 1;
font-size: 24px;
}
.checkbox_main_header p{
margin: 0 0 18px 0;
}
.checkbox_child{
display: flex;
flex-wrap: wrap;
width: 61px;
height: 48px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #A1A1A1;
border-radius: 10px;
opacity: 1;
justify-content: space-around;
align-items: center;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="costum_checkbox_main_parent">
<div class="checkbox_child"><span>36</span></div>
<div class="checkbox_child"><span>37</span></div>
<div class="checkbox_child"><span>38</span></div>
<div class="checkbox_child"><span>39</span></div>
<div class="checkbox_child"><span>40</span></div>
<div class="checkbox_child"><span>41</span></div>
<div class="checkbox_child"><span>42</span></div>
<div class="checkbox_child"><span>43</span></div>
</div>
</div>

Answer 1

You can use the following:
$(".checkbox_child").click(function() {
$(".clickedcolor").not($(this)).removeClass("clickedcolor")
$(this).toggleClass("clickedcolor")
})
I've also added a background color to clickedcolor just for the visual effect
Demo
$(".checkbox_child").click(function() {
$(".clickedcolor").not($(this)).removeClass("clickedcolor")
$(this).toggleClass("clickedcolor")
})
.checkbox_child:not(:first-child) {
margin-left: 15px;
}
.checkbox_child span {
font-family: firagoregular;
font-size: 24px;
}
.clickedcolor {
color: #056304;
background-color:blue!important;
border-color: #056304;
}
.checkbox_main_header p {
font-family: firagomedium;
color: #707070;
opacity: 1;
font-size: 24px;
}
.checkbox_main_header p {
margin: 0 0 18px 0;
}
.checkbox_child {
display: flex;
flex-wrap: wrap;
width: 61px;
height: 48px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #A1A1A1;
border-radius: 10px;
opacity: 1;
justify-content: space-around;
align-items: center;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="costum_checkbox_main_parent">
<div class="checkbox_child"><span>36</span></div>
<div class="checkbox_child"><span>37</span></div>
<div class="checkbox_child"><span>38</span></div>
<div class="checkbox_child"><span>39</span></div>
<div class="checkbox_child"><span>40</span></div>
<div class="checkbox_child"><span>41</span></div>
<div class="checkbox_child"><span>42</span></div>
<div class="checkbox_child"><span>43</span></div>
</div>
</div>