使用javascript更改php生成的div的颜色[关闭]

I'm trying to build a small list where users can indicate their favorite theme.

So, basically, when the user clicks on a div the background color (currently gray) changes to another color (green). When he clicks another time the background color has to change back to gray. I was able to change the color of the divs, but it also changed the color of the divs in front of him. The indicated divs (green) should be saved in my database.

My PHP code:

<?php
    while($Keuzescherm= $allGenres->fetch_assoc())
    {echo "<div class='keuzeDiv' id='".$Keuzescherm['Genrenaam'] ."'>" . $Keuzescherm['Genrenaam']."</>";}
?>

I'm not sure about the Javascript. But I'm guessing you need to use getElementById(). At the moment I'm using this:

$(".keuzeDiv").on("click", function () {
    $(this).toggleClass("green");
}); 

and the CSS:

.keuzeDiv {
    background-color:#dddddd; 
    padding-top:5%;
    color: black;
}

So my question is: how can I change the background color of the indicated div and save those divs in my database?

The problem is with your PHP code. You do not correctly close each DIV.

Change

{echo "<div class='keuzeDiv' id='".$Keuzescherm['Genrenaam'] ."'>" . $Keuzescherm['Genrenaam']."</>";}

(which produces <div>...</>)

to

{echo "<div class='keuzeDiv' id='".$Keuzescherm['Genrenaam'] ."'>" . $Keuzescherm['Genrenaam']."</div>";}

(which produces <div>...</div>)

You'll see from my fiddle that there is nothing wrong with your JavaScript.