php - JavaScript コードの自動作成

Question

言いにくいことで、私が何を助けてほしいのか理解できていない場合は申し訳ありません。

私は基本的にフォーラムシステムをコーディングしています。私のフォーラムシステムでは、管理者がコントロールパネルから新しいカテゴリを作成できるようにしたいのですが、これに関する問題は、各カテゴリにボックスを上にスライドさせる矢印が必要なことですが、どのように独自の矢印を自動的に作成するコードと、「矢印をクリックするとスライド ボックスが上に表示される」という JavaScript コーディングを追加できますか?

編集:
jsfiddle.net/UxJkA .

Javascript コード

        $(document).ready(function(){

    $("#a_main_content").show(); 
        $('.arrow').click(function () {
            $("#a_main_content").slideToggle();
        });


        $("#p_main_content").show();
        $('.p_arrow').click(function () {
            $("#p_main_content").slideToggle();
        });

});

HTMLコード

     <div id="bottom_corners"></div>
     <!-- Main content box -->


     <!-- Category 1 -->
     <div id="p_content_header">
     Category
     <img src="images/arrow.png" class="p_arrow">
     </div>
     <div id="p_main_content">
        <table>
    <tr>
    <td class="forum_name_header" style="width:240px;">Forum Name</td>
    <td class="forum_name_header" style="width: 300px;">Last Post</td>
    </tr>
    <tr>
    <td style="width:240px;" class="forum_name">James first forum<br />
                          <i style="color: #a3a3a3;">Topics: 858, Messages: 8,485</i></td>
    <td style="width: 300px;" class="forum_name">Test 1<br />
                              by <b style="color: red;">Admin</b></td>
    </tr>
        <tr>
    <td style="width:240px;" class="forum_name">James second forum<br />
                          <i style="color: #a3a3a3;">Topics: 434, Messages: 6,534</i></td>
    <td style="width: 300px;" class="forum_name">Test 2<br />
                              by <b style="color: blue;">Mod</b></td>
    </tr>
        </table>
     </div>
     <div id="bottom_corners"></div>
     <!-- Category 1 -->

     <!-- Category 2 -->
         <div id="p_content_header">
     Category 2
     <img src="images/arrow.png" class="p_arrow">
     </div>
     <div id="p_main_content">
        <table>
    <tr>
    <td class="forum_name_header" style="width:240px;">Forum Name</td>
    <td class="forum_name_header" style="width: 300px;">Last Post</td>
    </tr>
    <tr>
    <td style="width:240px;" class="forum_name">James first forum<br />
                          <i style="color: #a3a3a3;">Topics: 858, Messages: 8,485</i></td>
    <td style="width: 300px;" class="forum_name">Test 3<br />
                              by <b style="color: green;">Donator</b></td>
    </tr>
        <tr>
    <td style="width:240px;" class="forum_name">James second forum<br />
                          <i style="color: #a3a3a3;">Topics: 434, Messages: 6,534</i></td>
    <td style="width: 300px;" class="forum_name">Test 4<br />
                              by <b style="color: grey;">Registerd User</b></td>
    </tr>
            <tr>
    <td style="width:240px;" class="forum_name">James second forum<br />
                          <i style="color: #a3a3a3;">Topics: 434, Messages: 6,534</i></td>
    <td style="width: 300px;" class="forum_name">Test 5<br />
                              by <b style="color: #333;"><strike>Banned user</strike></b></td>
    </tr>

        </table>