Why does some data not toggling?

My 2nd department won't toggle (img not changing). Im not sure why

This is the sample code. I am mapping the table on the controller then calling the js to toggle

My logic is when toggling. I just hide and show the plus and minus img via js. the problem is id 1 is not toggling and the id 2 works just fine

DB tbl.department | id | department_name | | -------- | -------------- | | 1 | Test1 | | 2 | Test2 |

Controller

        $departments = DB::table('department')->get();
        $html.= '<table>';
        foreach($departments as $d) {
                $html.= '<tr>';
                $html.= '   <td><a href=\'javascript:department_toggle("'.$d['id'].'");\'><img id="'.$d['id'].'_img_1" src="'.asset('img/plus.gif').'" width="9" height="9"/><img id="'.$d['id'].'_img_2" src="'.asset('img/minus.gif').'" width="9" height="9" style="display:none"/> '.$d['department_name'].'</a>';
                $html.= '   <div id="'.$d['id'].'_div_1" style="display:none;"></div></td>';
                $html.= '</tr>';
        }
        $html.= '</table>';

JS

function department_toggle(deptid){
var a = $('#'+deptid+'_div_1');
var b = $('#'+deptid+'_img_1');
var c = $('#'+deptid+'_img_2');
if (a.is(':visible'))
{
    a.hide();
    b.show();
    c.hide();
}
else
{
    a.load('my-route', {deptid:deptid}).show(); //my intended data to display after toggle
    b.hide();
    c.show();
}

}

HTML Source:

Display:

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/SlZfhE4
via IFTTT