JAVASCRIPT:Toggle中的Toggle不工作问题

我是个新手，我有两个切换（很快就会有4个切换）。它们分开时工作得很好，但一旦我把它们放在一个和另一个里面，只有一个开关可以工作。

经过一番研究，我发现必须对我的javascript进行调整，但在网上找不到如何做到这一点。我找到了这个jQuery代码，它正是我想要做的。但因为我使用字符串（从数据库中打印出echo）来创建HTML，jQuery似乎无法工作。因此，我使用Javascript，我想知道在Javascript中是否有类似的东西。

http://jsfiddle.net/ufC5B/2/

我的代码

             //toggle and change bg colour
        function toggle_visibility(id) {
            var e = document.getElementById(id);
            if (e.style.display == "block" || e.style.display == "") {
                e.style.display = "none";
            } else {
                e.style.display = "block";
                text.innerHTML = "-";
            }
        }

PHP

  echo("<button id='onclick' onclick='toggle_visibility('"tog$i'")'> " . $_SESSION['Food_Cat_name'] . " </button>");
        echo("<div id='first_product'>");
        echo("<div id='tog$i' class ='hidden'>");
        echo("<div id='red_head'>");
        echo("<p id='menu_title'>  " . $_SESSION['Food_Cat_name'] . " </p>");
        echo("</div>");
        echo("<p >Menu Item</p>");
        //echo("<input type='button' id='new_item' value='Add new item to " . $_SESSION['Food_Cat_name'] . "' name='new_item'>");
        echo("<button id='new_item$i' onclick='toggle_visibility('"p_form$i'")' name='new_item'>Add new item to " . $_SESSION['Food_Cat_name'] . "</button>");
        echo("<div id='p_form$i' class ='hidden'>");
        echo("<input type='text' id='prod_name' name='prod_name' value=''>");
        echo("<br>");
        echo("<textarea id='desc' name='desc' placeholder='Item description' rows='4' maxlength='200'  required ></textarea>");
        echo("<br>");
        echo("<input type='text' id='price' name='price' value=''>");
        echo("</div>");
        echo("</form>");

渲染

           //toggle and change bg colour
            function toggle_visibility(id) {
                var e = document.getElementById(id);
             
                if (e.style.display == "block" || e.style.display == "") {
                    e.style.display = "none";
                 
                } else {
                    e.style.display = "block";
                    text.innerHTML = "-";
                }
            }

.hidden {
    display: none; 
}

           <button id='onclick' onclick='toggle_visibility("tog")'> " . $_SESSION['Food_Cat_name'] . " </button>
            <div id='first_product'>");
            <div id='tog' class ='hidden'>
            <div id='red_head'>
            <p id='menu_title'>  " . $_SESSION['Food_Cat_name'] . " </p>
            </div>
            <p >Menu Item</p>
           
            <button id='new_item' onclick='toggle_visibility("p_form")' name='new_item'>Add new item to " . $_SESSION['Food_Cat_name'] . "</button>
            
            <div id='p_form' class ='hidden'>
        
            <input type='text' id='prod_name' name='prod_name' value=''>
            <br>
            <textarea id='desc' name='desc' placeholder='Item description' rows='4' maxlength='200'  required ></textarea>
            <br>
            <input type='text' id='price' name='price' value=''>
            </div>
          
            </form>