JSFiddle - React, Tailwind, and code Playground

by AliReza Moazami

HTML

<div>
	<div class="col">
		<div id="61">61</div>
		<div id="31">31</div>
		<div id="94">94</div>
	</div>
	<div class="col">
		<div id="17">17</div>
		<div id="42">42</div>
	</div>
	<div class="col">
		<div id="36">36</div>
		<div id="26">26</div>
		<div id="89">89</div>
	</div>
</div>

<div style="clear:both"></div>

<button class="loadSpecialStat">بارگزاری وضعیت حاصی که از دیتابیس فراخوانی شده و در یک آبجکت جاوا اسکریپتی ریخته شده</button>

<button class="save">ذخیره وضعیت</button>

CSS

body{text-align:center}
.col{float:right;width:30%;border:1px solid gray;margin:1%;background:silver}
.col>div{margin:9px;padding:9px;background:#ffd}
/*by 9px.ir*/

JavaScript

$('.save').click(function(){
	var data={}, parentIndex;
	$("div[id]").each(function(){
		parentIndex=$(this).parent().index();
		if(!data[parentIndex])
			data[parentIndex]=[];
		data[parentIndex].push($(this).attr("id"));
	});
	//console.log(data);
	$.ajax({
		data:data,
		success: function(r){
			//...
		}//,...
	});
});

var specialStat = {
	0:[89],
	1:[61,42,17,26],
	2:[94,36,31]
};
$(".loadSpecialStat").click(function(){
	for(i in specialStat)
		for(j in specialStat[i])
			$("div#"+specialStat[i][j]).appendTo($(".col").eq(i));
});