单击一个 div 显示一个按钮，但隐藏其他 div 上的按钮

Question

我正在尝试制作一个笔记应用程序，其中有许多 div 作为笔记，我希望每当用户单击特定 div 时，它都应该是可编辑的，并且在 div 顶部显示一个按钮，在行动被隐藏。这部分我做了一些。现在我希望当用户点击页面的其他 div 或其他部分时，已经显示的按钮隐藏。 简而言之，那些 div 的按钮应该在用户当前工作的地方可见。

我不知道如何让一个按钮一次可见。

我用于显示按钮的 javascript 是：

edits=document.getElementsByClassName('new');
        Array.from(edits).forEach((element) => {
        child=element.childNode
            element.addEventListener("click",(e)=>
            {
                let data=e.target;
                data.contentEditable=true;
                let btn=data.getElementsByTagName('button');
                Array.from(btn).forEach(element => {
                    console.log(element);
                    element.style.display="block";
                    element.contentEditable=false;  
                });
            });
        });

这是那部分代码 https://jsfiddle.net/mahajaved/sq7zuakf/