I am wanting to consolidate a function into a module so it can be reused on several elements as opposed to having to write a new function out for each DOM element I want to use it on.

The function adds a class to a div via a listener input event. So...

When "Music" input is populated then "div class="music-input" shows. When "Age" input is populated then "div class="age-input" shows. When "Hair" input is populated then "div class="hair-input" shows. etc etc

At the moment I have the following function:

<input type="text" id="music-taste" name="properties[Music Taste]"/>  
<input type="text" id="your-age" name="properties[Your Age]"/>  
<input type="text" id="hair-colour" name="properties[Hair Colour]"/>  

var music_req = document.querySelector("#music-taste");
var age_req = document.querySelector("#your-age");
var hair_req = document.querySelector("#hair-colour");

function woolShow(){
    const showMusic = document.getElementById("music-input");
    const showMusic_classes = showMusic.classList;
    showMusic_classes.add("show-div");
}
music_req.addEventListener("input", woolShow);

This adds the "show-div" class to the existing div to show the content (I do this via CSS)

div#music {
    opacity: 0;
    transition:opacity 0.5s linear;
    padding: 20px;
    background: #e5e5e5;

}
div#music.show-div {
    opacity: 1;
}

I was just wondering if I can reuse the woolShow() function somehow using parameters to save me having to write out a different function for each div / input - Music, Age, Hair.