eğer Samsung kategorisine ürün kaydedeceksen bence şu şekilde kaydetmen gerek

Telefon,Android,Samsung

Yani kategorinin tüm üst kategorilerini de dahil ederek kayıt edebilirsin. ID ile örnek verecek olursak

$category = '1,3,6';
// 1 = Telefon
// 3 = Android
// 6 = Samsung

Bu mantıkta ürünler tablonda 1,3,6 diye olacağından ararken FIND_IN_SET() kullanacaksın mysql'de. Örneğin

// 3 android
$query = $db->query('select * from products where find_in_set(product_category, 3)')->fetchAll(PDO::FETCH_ASSOC);

gibi. Böylece Telefon kategorisine de girse Android kategorisine de girse ilgili ürünü görebilecek. Genelde e-ticaret sitelerinde bu mantıkta görürsün ürünleri

mysql ile yapabilmek istiyorsan web socket kullanırsın yeni data eklediğinde sockete bildirirsin client tarafında da bu socket dinleniyor olur yenilik gelince isteği ayar
eğer mysql kullanmayacaksan firebase gibi real time bir database kullanarakta aynı işlemleri gerçekleştirebilirsin, anahtar kelimelerin bunlar internette bolca örneği var bu arada bizim kanaldada php socket ile ilgili bir örnek mevcut :)

html'de eğer form elemanlarına required niteliğini verirsen :valid ve :invalid sözde sınıflarını kullanarak kontrol yapabilirsin.

Kontrol işlemi için form'larına form classını ekle ve zorunlu alanlarına required niteliğini ekle.

<form action="" class="form">
    <input type="text" placeholder="Kullanıcı adı" value="1" required> <br>
    <input type="email" placeholder="E-posta" value="[email protected]" required> <br>
    <input type="password" placeholder="Parola" minlength="3" value="123123" required> <br>
    <select name="gender" required>
        <option value="">Seç</option>
        <option value="1" >Erkek</option>
        <option value="2">Kadın</option>
    </select><br>
    <button type="reset">Reset</button>
    <button type="submit">Kayıt ol</button>
</form>

Şu koduda javascript dosyana eklediğinde gerekli kontrolleri yapıp ona göre disabled değerini ekleyip kaldıracaktır.

const control = form => {
    let invalids = form.querySelectorAll(':invalid'),
        button = form.querySelector('button[type="submit"]');

    console.log(invalids);

    if (invalids.length === 0){
        button.removeAttribute('disabled');
    } else {
        button.setAttribute('disabled', 'disabled');
    }
}

let forms = document.querySelectorAll('.form')
forms.forEach(form => {
    control(form);
    form.addEventListener('reset', () => setTimeout(() => control(form), 1));
    form.addEventListener('keyup', () => control(form));
    form.addEventListener('change', () => control(form));
});

Demo: https://codepen.io/tayfunerbilen/pen/eYdZVNV

css ile daha kısa yolu

aynı işlemi css ile şöyle yapabilirdin

.form:invalid button[type="submit"] {
    pointer-events: none;
    opacity: .3;
}
.form:valid button[type="submit"] {
    pointer-events: initial;
    opacity: 1;
}

@webdevyusuf, jquery'de $() fonksiyonunu kullanarak seçme yaptığımız için $() içinde kullanıyoruz this'i. o da kütüphane içinde gerekli ayarları yapıp bize esneklik sağlıyor. Yani bu $(this) değilse prototurk(this) de olabilirdi öyle düşün.