Javascript Jquery可排序和可拖动的辅助函数在具有多个元素的情况下为单个元素更改元素onclick

我正在尝试做一个看起来像Wordpress cms（后端部分）的东西。可以添加多个完全相同的头元素，用户可以在其中安全写入。创建/添加所有作品。拖放和排序也可以工作（jqueryui）。我已经使用var“index”使所有完全相同的标题元素具有不同的ID。问题是我无法获取我单击的标题元素的id。我需要这个，所以我只改变颜色，字体大小和文字颜色的一个我点击，而不是所有的。。。我想我所有的代码都变得非常混乱，需要问你们，因为我被卡住了：(

就像现在的代码一样，它只适用于1个可拖动对象。我希望它适用于多个对象

这是我的密码：

var指数=0；
$（函数（）{
$（“#可排序”）。可排序({
回复：false，
});
$（“.draggableElement”）.draggable({
connectToSortable:“#可排序”，
回复：“无效”，
//助手：“克隆”
助手：函数（）{
$（“#removeDiv”）.remove（）；
var元素\
\
\
H1\
氢\
H3\
H4\
H5\
H6\
\
\
';
索引++；
返回元素；
}
});
});
{#$（document）.ready（function（）{
$（“#firstHeader”）。单击（函数（）{
警惕（“clik”）；
});
}); #}
函数headingOne（）{
$（“#headingput”）.css（'font-size'，'3rem'）；
$（.font-weight-500”）.css（'color'，'black'）；
$（“#firstHeader”）.css（'color'，'#0069d9'）；
//console.log（“containerHeader”+索引）；
//$（“containerHeader+index）.find（“#firstHeader”）.css（'color'，'#0069d9'）；
}
//函数头2，3，4…完全相同

左上角的蓝色按钮是可拖动的，拖动后，它们会转换为带有H1 H2 H3等的“标题”部分。我将两个标题元素拖动到页面中。只有第一个始终有效…希望此编辑有助于使其更清晰

图为：

这是我的HTML，一个可拖动的按钮

//可恶的
拖进来

您需要将按钮id转换为类

 <button id="firstHeader"

---

你能不能提供jsfiddle/HTML。在路上…：）以前从未使用过它，所以可能需要一段时间才能完成…我认为jsfiddle不会发生。我将尝试添加一个屏幕截图。为了使代码在JSFIDLE中工作，我需要实现更多的方法…我将其放在本地，所以html视图源代码无法工作：（我将添加htmlHow关于这一点：P

 <button class="firstHeader"

$(".firstHeader").click(function() {
     alert($(this).parents(".bg-light").attr("id"));
});