<div class="containter block mr-5 pr-4">
            <div class="row">
                <div class="col-lg-4 col-md-12">
                    <select class="custom-select" id="owners" name="owners" onchange="loadShips()">
                        <option value="error">no results</option>
                    </select>
                </div>
                <div class="col-lg-4 col-md-12">
                    <select class="custom-select" id="ship" name="ship" onchange="loadReport()">
                        <option value="error">no results</option>
                    </select>
                </div>
                <div class="col-lg-4 col-md-12">
                    <select class="custom-select" id="report" name="report" onchange="loadRemarksData()">
                        <option value="error">no results</option>
                    </select>
                </div>
                <div class="col-lg-4 col-md-12">
                    <select class="custom-select" id="device" name="device" onchange="loadDevices()">
                        <option value="error">no results</option>
                    </select>
                </div>
            </div>
            <br>
            <div id="buttons-block" class="mb-3">

            </div>
            <div><input type="text" class="form-control form-control-sm" id="search_input"
                    placeholder="Search device" onkeyup="search_device(this)">

                <hr>
                <div class="row">
                    <div class="col-12">
                        <div class="row" id="device-row">

                        </div>
                    </div>
                </div>
            </div>
            <div class="senior-alert" id="alert" role="alert">
                <strong>Confirmation required </strong>
                <i class="fa fa-times cross" aria-hidden="true" onclick="turnOff()"></i>
                <hr>
                <div class="row">
                    <div class="col-12">
                        <p>Do you want to remove the sent flag and feedback? </p>
                    </div>
                    <div class="col-6">
                        <button class="btn" onclick="turnOff()">Back</button>
                    </div>
                    <div class="col-6" id="update_button_div">
                    </div>
                </div>

            </div>
        </div>
        <button type="button" name="button" class="btn btn-scroll" onclick="scroll_up()">Scroll <i
                class="fa fa-level-up" aria-hidden="true"></i></button>
<div class="senior-alert-delete-remarks" id="alert-delete-remarks" role="alert"></div>

 function search_device(input) {
     var keyword = input.value.toUpperCase();
     var device_row = document.getElementById("device-row");
     dev_list = device_row.getElementsByClassName('device_elemnt')
     remark_list = device_row.getElementsByClassName('remark_elemnt')
     feedback_list = device_row.getElementsByClassName('feedback_elemnt')
     hr_list = device_row.getElementsByClassName('hr_element')

     for (var i = 0; i < dev_list.length; i++) {
         var txt = dev_list[i].innerText.toUpperCase();
         if (!txt.match(keyword)) {
             $(dev_list[i]).attr('disabled', 'disabled').hide();
             $(remark_list[i]).attr('disabled', 'disabled').hide();
             $(feedback_list[i]).attr('disabled', 'disabled').hide();
             $(hr_list[i]).attr('disabled', 'disabled').hide();
         } else {
             $(dev_list[i]).removeAttr('disabled').show();
             $(remark_list[i]).removeAttr('disabled').show();
             $(feedback_list[i]).removeAttr('disabled').show();
             $(hr_list[i]).removeAttr('disabled').show();
         }
     }
 }

 let parent_select = document.getElementById('owners');
 let ship_select = document.getElementById('ship');
 let report_select = document.getElementById('report');
 let device_select = document.getElementById('device');

loadOwners()
function loadOwners() {
    $.ajax({
        url: '/load_owners',
        contentType: 'application/json;charset=UTF-8',
        type: 'POST',
        success: function (response) {
            owners = response.owners
            let optionHTML = ''
            for (let owner of owners) {
                optionHTML += '<option value="' + owner.owner_id + '">' + owner.owner_name + '</option>';
            }
            parent_select.innerHTML = optionHTML;
            loadShips()
        },
        error: function (error) {
            createAlerts('danger', 'Error while loading owner list')
        }
    });
};

function loadShips() {
owner_id = parent_select.options[parent_select.selectedIndex].value
$.ajax({
url: '/load_ships',
data: JSON.stringify({
owner_id: owner_id,
}),
contentType: 'application/json;charset=UTF-8',
type: 'POST',
success: function (response) {
ships = response.ships
let optionHTML = ''
for (let ship of ships) {
optionHTML += '<option value="' + ship.ship_id + '">' + ship.ship_name + '</option>';
}
ship_select.innerHTML = optionHTML;
loadReport()
loadDevices()
},
error: function (error) {
createAlerts('danger', 'Error while loading ship list')
}
});
};
function loadReport() {
ship_id = document.getElementById('ship').value
$.ajax({
url: '/load_reports',
data: JSON.stringify({
ship_id: ship_id,
}),
contentType: 'application/json;charset=UTF-8',
type: 'POST',
success: function (response) {
reports = response.report_list
let optionHTML = ''
for (let report of reports) {
optionHTML += '<option value="' + report.id + '">' + report.report_number + '</option>';
}
report_select.innerHTML = optionHTML;
// loadRemarksData()
},
error: function (error) {
createAlerts('danger', 'Error while loading report list')
}
});
}
function loadDevices() {
ship_id = ship_select.options[ship_select.selectedIndex].value
$.ajax({
url: '/load_devices',
data: JSON.stringify({
ship_id: ship_id,
}),
contentType: 'application/json;charset=UTF-8',
type: 'POST',
success: function (response) {
devices = response.devices_list
let optionHTML = ''
for (let device of devices) {
optionHTML += '<option id="' + device.device_id + '" value="' + device.device_id + '">' + device.device_name + '</option>';
}
device_select.innerHTML = optionHTML;
// loadPointDevices()
},
error: function (error) {
createAlerts('danger', 'Error while loading device list')
}

BACKEND:
@app.route('/load_devices', methods=["POST"])
@login_required
def load_devices():
JSON = request.json
ship_id = JSON["ship_id"]
json_data = LoadLists().load_device_list(ship_id)
return json_data

@app.route('/load_ships', methods=["POST"])
@login_required
def load_ship_list():
JSON = request.json
owner_id = JSON["owner_id"]
json_data = LoadLists().load_ship_list(owner_id)
return json_data

@app.route('/load_owners', methods=["POST"])
@login_required
def load_owner_list():
json_data = LoadLists().load_owner_list()
return json_data

@app.route('/load_reports', methods=["POST"])
@login_required
def load_reports():
JSON = request.json
ship_id = JSON["ship_id"]
json_data = LoadLists().load_report_list(ship_id)
return json_data
@app.route('/load_device_list_by_report', methods=["POST"])
@login_required
def load_device_list_by_report():
JSON = request.json
raport_id = JSON["raport_id"]
print('start load')
json_data = LoadLists().load_device_list_by_report(raport_id)
return json_data