Невозможно перемещаться по содержимому боковой панели, когда я использую iframe для каждого из них

Итак, у меня есть страница с верхней панелью навигации, боковой панелью и контентом справа. Теперь у меня есть дизайн моих страниц, но я чувствовал, что они повторяются, поэтому я пытался работать с фреймами справа (тот, который меняется при изменении любой ссылки на боковой панели). Надеюсь, вы уловили идею.

Теперь проблема в том, что я могу перейти ко второму тегу iframe с 1-го, но не со второго на первый iframe.

Вот код. HTML:

        <div class="container-fluid side-content">

          <iframe src="carsx-iframe.html" id="car-frame" height="100%" width="100%" style="outline: none; border:none; "></iframe>

          <iframe src="edit-profile-iframe.html" id="edit-prof" height="1050px" width="100%" style="outline: none; border-style: none;"></iframe>

        </div>

Js:

$(document).ready(function() {
  $("#edit-prof-click").click(function() {
    $("#edit-prof").show();
  });
});

 $(document).ready(function() {
  $("#cars").click(function() {
    $("#car-frame").show();
  });
});

CSS

#edit-prof{
  display: none;
}

#car-frame{
  display: none;
}