Javascript 相同的div填充了数据，而不是不同的div

$（函数（）{
摄像机、渲染器；
var mpi=Math.PI/180；
循环变异系数=1800；
var-startAngle=0；
var centerX=0；
var centerZ=0；
var startRadians=startAngle+mpi；
var=5；
var incrementAngle=360/totalSpheres；
var增量弧度=增量角度*mpi；
变量元素=功能（id、w、h、位置、旋转）{
变量html=[
'',
“
”，
“
”，
'',
'',
“
”，
“
”，
''
].join（'\n'）；
var div=document.createElement（'div'）；
$（div）.html（html）；
var对象=新的三个.CSS3DObject（div）；
object.position.x=position.x；
object.position.y=position.y；
object.position.z=position.z；
object.rotation.x=rotation.x；
object.rotation.y=rotation.y；
object.rotation.z=rotation.z；
返回对象；
}			
init（）；
函数init（）{
场景=新的三个。场景（）；
var container=document.getElementById（'container'）；
var renderer=new THREE.css3drender（）；
渲染器.setSize（window.innerWidth，window.innerHeight*.85）；
container.appendChild（renderer.doElement）；
摄像头=新的三个透视摄像头（50，window.innerWidth/window.innerHeight，1,10）；
摄像机位置设置（-100,604000）；
var group=新的三个.group（）；
var str={“0”：$.ajax({
数据类型：“文本”，
url:“http://localhost/liberate/threeee/PAGES/Information/pages/content.html",
成功：功能（数据）{
控制台日志（数据）；
$（“#id”）。追加（数据）；
}}),
“1”：.ajax({
数据类型：“文本”，
url:“http://localhost/liberate/threeee/PAGES/Information/pages/content.html",
成功：功能（数据）{
控制台日志（数据）；
$（“#攻击者”）.append（数据）；
}}),
“2”：.ajax({
数据类型：“文本”，
url:“http://localhost/liberate/threeee/PAGES/Information/pages/content.html",
成功：功能（数据）{
控制台日志（数据）；
$（“#攻击者”）.append（数据）；
}})
}
对于（var i=0；i
*，*：之后，*：之前{-webkit框大小：边框框；-moz框大小：边框框；框大小：边框框；}
身体{
背景#fbc73b；
字体系列：“Lato”，Arial，无衬线；
颜色：#fff；
}
.包装纸{
保证金：0自动100px自动；
最大宽度：960像素；
}
.舞台{
列表样式：无；
填充：0；
}
/*************************************
构建场景并在悬停时旋转
**************************************/
.现场{
宽度：260px；
高度：400px；
利润率：30像素；
浮动：左；
-webkit透视图：1000px；
-moz透视图：1000px；
透视图：1000px；
}
.电影{
宽度：260px；
高度：400px；
-webkit变换样式：保留-3d；
-moz变换样式：preserve-3d；
变换样式：保留-3d；
-webkit转换：translateZ（-130px）；
-moz变换：translateZ（-130px）；
变换：translateZ（-130px）；
-webkit转换：-webkit转换350ms；
-moz变换：moz变换350ms；
转换：转换350ms；
}
.电影：悬停{
-webkit变换：旋转（-78度）translateZ（20px）；
-莫兹变换：旋转（-78度）平移Z（20px）；
变换：旋转（-78度）平移Z（20px）；
}
/*************************************
变换两个平面并设置其样式
**************************************/
.电影.海报，
.movie.info{
位置：绝对位置；
宽度：260px；
高度：400px；
背景色：#fff；
-webkit背面可见性：隐藏；
-moz背面可见性：隐藏；
背面可见性：隐藏；
}
.电影.海报{
-webkit转换：translateZ（130px）；
-moz变换：translateZ（130px）；
变换：translateZ（130px）；
背景尺寸：封面；
背景重复：无重复；
}
.movie.info{
-webkit变换：旋转（90度）平移（130像素）；
-莫兹变换：旋转（90度）平移（130像素）；
变换：旋转（90度）平移（130像素）；
边框：1px实心#B8B5B5；
字体大小：0.75em；
}
/*************************************
三维对象下的阴影
**************************************/
.cstransforms3d.电影：：之后{
内容：''；
宽度：260px；
高度：260px；
位置：绝对位置；
底部：0；
盒影：0 30px 50px rgba（0,0,0,0.3）；
-webkit转换来源：100%100%；
-moz变换原点：100%100%；
变换原点：100%100%；
-webkit变换：rotateX（90度）translateY（130像素）；
-莫兹变换：旋转（90度）平移（130像素）；
变换：旋转（90度）平移（130像素）；
-webkit转换：箱影350ms；
-moz转换：盒影350ms；
过渡：箱影350ms；
}
.cstransforms3d.电影：悬停：：之后{
盒影：20px-5px50pxRGBA（0,0,0,0.3）；
}
/*************************************
电影信息
**************************************/
.info标题{
颜色：#FFF；
填充：7px 10px；
字体大小：粗体；
高度：195px；
背景尺寸：包含；
背景重复：无重复；
文本阴影：0px 1px 1px rgba（0,0,0,1）；
}
.info标题h1{
边际：0.02倍；
字号：1.4em；
}
.信息标题.评级{
边框：1px实心#FFF；
填充：0px 3px；
}
.info p{
填充物：1.2em 1.4em；
边际：2px0；
字号：700；
颜色：#666；
线高：1.4em；
边框顶部：10px实心#555；
}
/*************************************
使用框阴影生成“照明”
*************