显示每个循环项目的弹出窗口

Question

这是我第一次在这里提问。

我的查看中有循环代码：

@foreach (var item in Model)
{
    <div class="col-md-3 col-sm-1 templates" id="item_@item.Form_Id>
        <div class="overlay">
            <div class="template-thumbnails">
                <div class="thumbnails-logo">
                    <i class="material-icons">list_alt</i>
                </div>
                <div class="icon-buttons-wrapper">
                    <div class="action-buttons-wrapper clearfix">
                        <ul class="actions-list">
                            <li class="clearfix">
                                <a class="block-link" href="@Url.Action("ConfigureForm", "Forms", new { id = item.Form_Id })">
                                    <div class="action-icon">
                                        <i class="material-icons">edit</i>
                                    </div>
                                    <div class="action-text">
                                        Edit
                                    </div>
                                </a>
                            </li>
                            <li class="clearfix">
                                <a class="block-link" href="@Url.Action("Delete", "Forms", new { id = item.Form_Id })">
                                    <div class="action-icon">
                                        <i class="material-icons">delete</i>
                                    </div>
                                    <div class="action-text">
                                        Delete
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <a onclick="toggle_visibility(item_@item.Form_Id) href="#pop-up" class="actions-toggle"><i class="material-icons">more_vert</i></a>
                        </div>
                <h6>@Html.DisplayFor(modelItem => item.Label)</h6>
            </div>
        </div>
    </div>  
}

和 CSS ：

    .action-buttons-wrapper {
    background-color: #f7f7f7;
    padding: 10px 15px;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
    transition: ease .3s;
}

.actions-list {
    list-style: none;
    padding: 10px 5px;
    margin: 0;
    width: 150px;
}

.actions-list li {
    padding: 5px 8px;
}

.action-icon {
    float: left;
    margin-right: 20px;
}

.action-text {
    float: left;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    font-size: .8em;
    line-height: 2.1em;
}

.actions-toggle {
    position: absolute;
    top: 80%;
    right: 2%;
    display: block;
}

我想要发生的是，当我在.actions-toggle按钮上点击时，项目旁边会出现迷你弹出式菜单 ，即icon-buttons-wrapper div。

我试过这个Javascript代码：

<script>
    function toggle_visibility(element) {
        var fml = document.getElementById(element);
        fml.classList.toggle("show-action");
    }
</script>

但显然我在这里做错了，没有弹出窗口显示出来。

是的，有人能帮帮我吗？