Javascript 如何将门票仅添加到特定的卡当前所有门票将转到第一张卡

创造一些像trello的东西来练习，所以到目前为止，我已经创造了三张牌，在每张牌中我想创造门票，但我只能在我的第一张牌中做到这一点，只是我不知道如何在所有牌中做到这一点，这是我的全部代码

我的html文件

//在主屏幕上显示用户名
让name=Cookies.get（'UName'）；
设dis=name.split（'@'）；
设dispname=dis[0]；
document.getElementById（'Uname'）。innerHTML=dispname；
//单击可编辑的项目
文档.添加的列表器（“单击”，函数（e）{
var elementsIdSelector=“editableLi”；
e=（e | | window.event）；
e、 预防默认值（）；
var-path=e.path；
对于（变量i=0；i
正文{
字体系列：Arial，无衬线；
显示器：flex；
弯曲方向：立柱；
}
.btn{
显示器：flex；
证明内容：中心；
对齐项目：居中；
字体：继承；
背景：无；
边界：无；
颜色：继承；
填充：0；
光标：指针；
}
：焦点{
轮廓颜色：#fa0；
}
：根{
字体大小：11px；
}
*,
*：：之前，
*：：之后{
框大小：边框框；
}
/*桅顶*/
桅顶{
弹性基础：4rem；
显示器：flex；
对齐项目：居中；
填充：0.8雷姆；
裕度：-8px-8px 0-8px；
背景色#0067a3；
长方体阴影：0.1rem 0.1rem rgba（0,0,0,0.1）；
}
.maisthead.btn{
背景色：#4c94be；
边界半径：0.3rem；
过渡：背景色150ms；
}
.maisthead.btn:悬停{
背景色：#3385b5；
}
.boards菜单{
显示器：flex；
弹性收缩：0；
}
.董事会btn{
弹性基准：9雷姆；
字体大小：1.4rem；
字号：700；
颜色：#fff；
右边距：0.8雷姆；
填充：0.6雷姆0.8雷姆；
}
.btn图标{
字体大小：1.7rem；
右侧填充：1.2rem；
}
.搜索板{
弹性基准：18雷姆；
位置：相对位置；
}
.board搜索输入{
高度：3雷姆；
边界：无；
边界半径：0.3rem；
背景色：#4c94be；
宽度：100%；
填充：0 3rem 0 1rem；
颜色：#fff；
}
.board搜索输入：悬停{
背景色：#66a4c8；
}
.搜索图标{
字体大小：1.5rem；
位置：绝对位置；
最高：50%；
右：0.8雷姆；
变换：平移（-50%）旋转（90度）；
颜色：#fff；
}
.标志{
弹性：1；
字体系列：“小胡瓜”，草书；
字号：2.2rem；
字号：700；
颜色：rgba（255，255，255，0.5）；
保证金：0.2rem；
过渡：颜色150ms；
文本对齐：居中；
空白：nowrap；
光标：指针；
}
.徽标：悬停{
颜色：rgba（255，255，255，0.8）；
}
.标志图标{
右侧填充：0.4rem；
}
.用户设置{
显示器：flex；
高度：3雷姆；
颜色：#fff；
}
.用户设置btn{
字体大小：1.5rem；
宽度：3.5雷姆；
保证金权利：1.5雷姆；
}
/*板信息栏*/
.board信息栏{
弹性基础：3rem；
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
保证金：0.8雷姆0；
填充：0 1rem；
颜色：#f6f6f6；
}
sboard信息栏{
字体大小：1.4rem；
字体大小：400；
过渡：背景色150ms；
填充：0.6雷姆；
边界半径：0.3rem；
高度：3雷姆；
}
.board信息栏。btn:悬停{
背景色：#006aa8；
}
.专用btn图标，
.菜单btn图标{
右侧填充：0.6rem；
空白：nowrap；
}
.董事会名称h2{
字体大小：1.8rem；
字号：700；
空白：nowrap；
}
/*列表*/
.列出容器：：-webkit滚动条{
身高：2.4rem；
}
.lists容器：：-webkit滚动条拇指{
背景色：#66a3c7；
边框：0.8rem实心#0079bf；
边框顶部宽度：0；
}
.列出容器{
显示器：flex；
对齐项目：开始；
填充：0.8雷姆0.8雷姆；
溢出-x：自动；
高度：计算（100vh-8.6rem）；
边缘顶部：60像素；
}
.名单{
弹性：0.27雷姆；
显示器：flex；
弯曲方向：立柱；
背景色：#e2e4e6；
最大高度：计算（100vh-11.8rem）；
边界半径：0.3rem；
右边距：1rem；
}
.列表：类型的最后一个{
右边距：0；
}
.名单标题{
字体大小：1.4rem；
字号：700；
颜色：#333；
填充：1rem；
}
.清单项目{
弹性：1；
显示器：flex；
弯曲方向：立柱；
对齐内容：开始；
填充：0.6雷姆0.5雷姆；
溢出y：自动；
}
.列表项：：-webkit滚动条{
function createEditableLi(ulId) { //here is change to your code
    const ul = document.getElementById(ulId);  ////here is change to your code
    const newLi = document.createElement("li");
    newLi.setAttribute("id", "editableLi");
    ul.appendChild(newLi);
}

<section class="lists-container">
        <div class="list" id="dragabble_card">// here change
            <h3 class="list-title">Tasks</h3>
            <form action="/public/card-controller.js" method="POST">
                <ul class="list-items" id="parent_1">
                    <li id="editableLi"> </li>
                    <li id="editableLi"> </li>
                    <li id="editableLi"> </li>
                </ul>
            </form>
            <button class="add-card-btn btn" onclick="createEditableLi('parent_1')">Add a card</button> //here is change to you code
        </div>
        <div class="list" id="dragabble_card">// here change
            <h3 class="list-title">Pending Tasks</h3>
            <form action="/public/card-controller.js" method="POST">
                <ul class="list-items" id="parent_2">//here change
                    <li id="editableLi"> </li>
                    <li id="editableLi"> </li>
                    <li id="editableLi"> </li>
                </ul>
            </form>
            <button class="add-card-btn btn" onclick="createEditableLi('parent_2')">Add a card</button> // here change
        </div>
        <div class="list" id="dragabble_card">
            <h3 class="list-title">Completed Tasks</h3>
            <form action="/public/card-controller.js" method="POST">
                <ul class="list-items" id="parent_3">//here change
                    <li id="editableLi"> </li>
                    <li id="editableLi"> </li>
                    <li id="editableLi"> </li>
                </ul>
            </form>
            <button class="add-card-btn btn" onclick="createEditableLi('parent_3')">Add a card</button> // here change
        </div>
    </section>