У меня есть данный код. Мне необходимо, когда я выбирал какую либо позицию, под ней отображались её характеристики, если я выбираю две позиции, то их характеристики отображаются строго под ними. Добавь функцию писания в полях для выбора не меняя их положение.
Я тебе помогу, вот пример кода, который можно придумать вставить с моими характеристиками, чтобы они оттягивались с базы данных. Напиши ещё вариант базы данных на excel и тогда будет подтягиваться с этой таблицы

compare.html:
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Сравнить моторы</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">О нас</a></li>
                <li><a href="compare.html">Сравнить моторы</a></li>
                <li><a href="contacts.html">Контакты</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="compare">
            <h2>Сравнить моторы</h2>
            <form>
                <label for="motor1">Мотор 1:</label>
                <select id="motor1" name="motor1">
                    <option value="motorA">Мотор A</option>
                    <option value="motorB">Мотор B</option>
                </select>
                <label for="motor2">Мотор 2:</label>
                <select id="motor2" name="motor2">
                    <option value="motorA">Мотор A</option>
                    <option value="motorB">Мотор B</option>
                </select>
            </form>
            <div class="comparison-results">
                <!-- Здесь будут результаты сравнения -->
            </div>
        </section>
    </main>
    <script src="js/scripts.js"></script>
</body>
</html>

styles.css:
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    text-align: right;
}

header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

header nav ul li {
    display: inline;
    margin-right: 20px;
}

header nav ul li a {
    color: #fff;
    text-decoration: none;
    position: relative;
}

header nav ul li a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: #fff;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

header nav ul li a:hover::after {
    transform: scaleX(1);
}

.hero {
    position: relative;
    text-align: center;
    color: white;
}

.hero .background-image {
    width: 100%;
    height: auto;
}

.hero h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3em;
}

.content .background-image-2 {
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.compare {
    text-align: center;
    padding: 20px;
}

.contacts {
    text-align: center;
    padding: 20px;
}

script.js

window.addEventListener('scroll', function() {
    const image = document.querySelector('.background-image-2');
    const scrollPosition = window.scrollY;
    const imageHeight = image.offsetHeight;
    const opacity = Math.min(scrollPosition / imageHeight, 1);
    image.style.opacity = opacity;
});

data.json:

{
    "motors": [
        {
            "id": "motorA",
            "name": "Мотор A",
            "power": "1000W",
            "weight": "2kg",
            "efficiency": "90%"
        },
        {
            "id": "motorB",
            "name": "Мотор B",
            "power": "1200W",
            "weight": "2.5kg",
            "efficiency": "85%"
        }
    ]
}