Как использовать функцию загрузки javascript дважды? (загрузка нагрузки)

Я создал страницу, где я использую функцию загрузки onclick для загрузки php-файла в div. Теперь я хочу загрузить другой файл в другой div из ранее импортированного файла.

Так, например:
[Категория 1 | Категория 2 | Категория 3 | Категория 4]
[здесь получен файл 1, импортированный из нажатой категории, содержащей href] [Вот второй div, который будет импортировать другой файл из href, который вызывается из первого импортированного файла]

Так или иначе, я не могу заставить его работать для второго импорта. Первые импортные работы. Я использую тот же код из первого импорта для второго импорта (просто другой id (#)).

Часть первого файла для импорта:

<li ><a href="#" id="campaign" >Campaign</a ></li > <li ><a href="#" id="resources" >Resources</a ></li > <li ><a href="#" id="gang" >Gang</a ></li > <li ><a href="#" id="gambling" >Gambling</a ></li > <li ><a href="#" id="off-topic" >Off-Topic</a ></li > <script > $(document).ready(function () { // Forum categories $("#campaign").on("click", function () { $("#main").load("forum/campaign.php"); }); $("#resources").on("click", function () { $("#main").load("forum/resources.php"); }); $("#gang").on("click", function () { $("#main").load("forum/gang.php"); }); $("#gambling").on("click", function () { $("#main").load("forum/gambling.php"); }); $("#off-topic").on("click", function () { $("#main").load("forum/off-topic.php"); }); }); </script > 

Часть второго файла для импорта:

 <a href="#" class="list-group-item small" id="message" style="background-color:black; color:white;" ><span class="glyphicon glyphicon-pushpin" aria-hidden="true" ></span > | <?php echo $sticky['header']; ?> </a > <script > $(document).ready(function () { // Forum categories $("#message").on("click", function () { $("#getmessage").load("forum/getmessage.php"); }); </script >