Можно ли вставить значение в базу данных из элемента select и тега ввода с таким же идентификатором?

Question

То, что я пытаюсь сделать, это вставить значение в мою базу данных, используя идентификатор.Но моя проблема в том, что у меня есть <select> и <input> с тем же идентификатором, и он вообще не вставляет никаких данных.
Мне нужно вставить значение из #subcat в my_table.
Когда#category selected value == "Tuition" мне нужно использовать только <select id="subcat">, а когда #category selected value! = "Tuition" мне нужно только использовать <input id="subcat">
Я узнал, что id должен быть уникальными извините, я еще не так хорош в javascript.

Вот мой код:

<form method="post" role="form">
    <label>Category</label>
    <select id="category">
        <option value="" hidden>Select Category</option>
        <option value="Tuition">Tuition</option>
        <option value="Miscellaneous">Miscellaneous</option>
        <option value="Others">Others</option>
    </select>
    <div id="for_blank">
        <input type="text" placeholder="Please select a category" readonly>
    </div>
    <div id="for_tuition" style="display: none;">
        <select id="subcat">
            <option value="" hidden>Select subcateogry</option>
            <option value="Full Payment">Full Payment</option>
            <option value="Downpayment">Downpayment</option>
        </select>
    </div>
    <div id="for_else" style="display: none;">
        <input type="text" id="subcat" placeholder="Enter Subcategory"
    </div>
    <script>
        $('#category').change(function() {
            if ($(this).val() == "Tuition") {
                $('#for_tuition').show();
                $('#for_blank').hide();
                $('#for_else').hide();
            } else if ($(this).val() == "Miscellaneous") {
                $('#for_else).show();
                $('#for_tuition').hide();
                $('#for_blank').hide();
            } else if ($(this).val() == "Others") {
                $('#for_else).show();
                $('#for_tuition').hide();
                $('#for_blank').hide();
            } else {
                $('#for_blank').show();
                $('#for_tuition').hide();
                $('#for_else').hide();
            }
        });
    </script>
    <button type="submit" name="add_item">Add Record</button>
</form>
<?php
    if (isset($_POST['add_item'])) {
        $category = $_POST['category'];
        $subcat = $_POST['subcat'];
        $sql = "INSERT INTO my_tbl (category, subcat)
            VALUES ($category, $subcat);";
    }
?>