I have list of divs that are produced dynamically, which basically users clicks on one of the them ex: the div dat has data-square=0-1 and then clicks on the div data-square=0.8, the class attr and data-square values are being send to server and server approves whether they should be replaced or not. for replacing. but first inner div attr should be replaced by the second one thats clicked, and the first one should have a class=empty
before being send to server:
<div class="column" data-square="0-1">
<div class="GREEN"></div>
</div>
<div class="column" data-square="0-5">
<div class="GREEN"></div>
</div>
<div class="column" data-square="0-8">
<div class="YELLOW"></div>
</div>
it should be like this once it receives back from server
<div class="column" data-square="0-1">
<div class="EMPTY"></div>
</div>
<div class="column" data-square="0-5">
<div class="GREEN"></div>
</div>
<div class="column" data-square="0-8">
<div class="GREEN"></div>
</div>
but when i receive from the server, it deletes all the class titled GREEN, it should replace the class titled GREEN which the user clicked the fist time.
i can replace and make the first div to empty without sending it to server, but when it comes to , performing the actions upon receiving the entire class gets deleted.
$.post("check.php", { from:from,to:to,classFrom:$classFrom,classTo:classTo},
function(data) {
$($classFrom).children().removeAttr('class').addClass('EMPTY');
})