Could I write these event listeners in a more efficient way?

Question

Hi I have created 9 event listeners that are very similar and I would like to write them in a more efficient manner if possible. each button opens up the same hidden form and populates the dropdown menu with a different value.

const ordermulch = document.getElementById('Mulch');
ordermulch.addEventListener('click', () => {
    document.getElementById('order-form').style.display = "block";
    document.getElementById("input_9_11").selectedIndex = 1;
});
const orderptopsoil = document.getElementById('prem-topsoil');
orderptopsoil.addEventListener('click', () => {
    document.getElementById('order-form').style.display = "block";
    document.getElementById("input_9_11").selectedIndex = 2;
});
const orderstopsoil = document.getElementById('screened-topsoil');
orderstopsoil.addEventListener('click', () => {
    document.getElementById('order-form').style.display = "block";
    document.getElementById("input_9_11").selectedIndex = 3;
});
const ordercgravel = document.getElementById('crushed-gravel');
ordercgravel.addEventListener('click', () => {
    document.getElementById('order-form').style.display = "block";
    document.getElementById("input_9_11").selectedIndex = 4;
});
const orderpgravel = document.getElementById('pea-gravel');
orderpgravel.addEventListener('click', () => {
    document.getElementById('order-form').style.display = "block";
    document.getElementById("input_9_11").selectedIndex = 5;
});
const orderrrock = document.getElementById('river-rock');
orderrrock.addEventListener('click', () => {
    document.getElementById('order-form').style.display = "block";
    document.getElementById("input_9_11").selectedIndex = 6;
});
const orderhpbed = document.getElementById('bedding');
orderhpbed.addEventListener('click', () => {
    document.getElementById('order-form').style.display = "block";
    document.getElementById("input_9_11").selectedIndex = 7;
});
const ordersand = document.getElementById('sand');
ordersand.addEventListener('click', () => {
    document.getElementById('order-form').style.display = "block";
    document.getElementById("input_9_11").selectedIndex = 8;
});
const ordergseed = document.getElementById('grass-seed');
ordergseed.addEventListener('click', () => {
    document.getElementById('order-form').style.display = "block";
    document.getElementById("input_9_11").selectedIndex = 9;
});

Answer 1

This is simple, use loops!

Collect all your IDs in an array:

const ids = ['Mulch', 'prem-topsoil', 'screened-topsoil']; // and so on...

Loop through this array:

ids.forEach((value, i) => {
    // todo
});

For each iteration you have to get the element first:

const element = document.getElementById(value);

And now you can add the EventListener to this element:

element.addEventListener('click', () => {
    document.getElementById('order-form').style.display = 'block';
    document.getElementById('input_9_11').selectedIndex = i+1;
});

All together:

const ids = ['Mulch', 'prem-topsoil', 'screened-topsoil']; // and so on...
ids.forEach((value, i) => {
    const element = document.getElementById(value);
    element.addEventListener('click', () => {
        document.getElementById('order-form').style.display = 'block';
        document.getElementById('input_9_11').selectedIndex = i+1;
    });
});

Small side note: It's great that you're looking for optimizations and don't want to use redudant code. That's the only way to get better!