Показать всплывающее окно для каждого зацикленного элемента

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 дел.

Я пробовал этот код Javascript:

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

Но, очевидно, я здесь что-то не так делаю, и ни одно из всплывающих окон не отображается.

Может кто-нибудь мне помочь?