'() =>' bu aslında 'function()' yazımının kısa hali yani,

album.addEventListener('change', function() { id.value = album.value; });

Böylede yazılabilirdi.
Birbirine atama olayı dediğin yerde,
album dediğim senin select etiketin.
id dedigim ise ekranda select ile seçtiğin option, değerini göstericek olan input.
Şimdi sen select ile herhangi bir şey seçtiğinde seçtiğin şeyin option value değerini,

var album = document.querySelector('#album');

Bu şekilde alıyoruz misal istanbul seçtin idsi 34 olsun artık album değişkeninde 34 değeri var sonrasın da tek yapmak gereken ekrandaki inputta bunu göstermek o inputu da şu şekilde tanımlamıştık.

var id = document.querySelector('#id'); 
/* 
Bundan sonra ki kısımda da şunu diyorum, Eğer select ile herhangi bir şey seçilirse onun değerini al ve inputun değerine yaz.
*/
album.addEventListener('change', () => { id.value = album.value; });

Ve de Foreach parantezleri burada

parantezlerin dışında olanı

<!-- Eski hali -->
<input type="text" name="idsi" style="text-align:center;" id="id" value="<?php echo $resimalbumu['resimalbumu_id']; ?>">
<!-- Yeni hali -->
<input type="text" name="idsi" style="text-align:center;" id="id">

Şeklinde düzelt

<input type="text" name="idsi" style="text-align:center;" id="id" value="<?php echo $resimalbumu['resimalbumu_id']; ?>">
<!--  Bu kısım foreach dışında kalmış, çalışmıyordur. -->

var album = document.querySelector('#album'); // Select
var id = document.querySelector('#id'); // Input
album.addEventListener('change', () => {
    id.value = album.value;
});

Menüde kullanılan a etiketlerinin yanlardan çok fazla iç boşluğu var buda haliyle sayfa küçülünce taşma yapıyor.
Çözüm olarak istersen daha erken mobile görünüme geçmesini sağlayabilirsin (Uğraştırır) ya da

/* Eski Hali */
#oc-menu-4441 .ul-top-items .li-top-item .a-top-link {
    padding: 17px 26px 13px 26px;
}    
/* Yeni Hali */ 
#oc-menu-4441 .ul-top-items .li-top-item .a-top-link {
    padding: 17px 12px 13px;
}

Şeklinde düzeltebilirsin.

Oops :)

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html,body{
    width: 100%;
    height: 100%;
}
#wrapper{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
}
.main-sidebar{
    flex: 1;
    background-color: #343a40;
}
.content-wrapper{
    display: flex;
    flex-direction: column;
    flex: 3;
}
.content-wrapper .main-header{
    border-bottom: 1px solid #efefef;
    background-color: #fff;
}
.content-wrapper .main-content{
    height: 100%;
    background-color: #f4f6f9;
}
.content-wrapper .main-footer{
    margin-top: auto;
    border-top: 1px solid #efefef;
    background-color: #fff;
}

Bunu düzenleyebilecek kadar bilgiye sahip değilim ama light slider kullanabilirsin

AJAX ile yapmak mümkün

<nav>
    <ul>
        <li><a href="#" id="anasayfa">Anasayfa</a></li>
        <li><a href="#" id="iletisim">İletişim</a></li>
        <li><a href="#" id="hakkimizda">Hakkımızda</a></li>
    </ul>
</nav>

<div class="container">
    <h1>Anasafya</h1>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

$('nav ul li a').click(function () {
    $.post('getPage.php',{
        sayfa: $(this).attr('id')
    },function(response) {
        $('.container').html(response);
    });
});

// getPage.php sayfası için
switch($_POST['sayfa']):
    case 'anasayfa':
        include_once 'anasayfa.php';
    break;
    case 'iletisim':
        include_once 'iletisim.php';
    break;
    default:
        include_once 'hakkimizda.php';
endswitch;

// ansayfa.php sayfası için
echo '<h1>Anasayfa</h1>';

// iletisim.php sayfası için
echo '<h1>İletişim</h1>';

// hakkimizda.php sayfası için
echo '<h1>Hakkımızda</h1>';

Ubuntu için LAMP var.

Farklı tarayıcıdan?