How do I change the css for a future element being made in a to do list?

For my final project we're making a to do list with the phonegap plugins system. For extra credit, the user should be able to pick the colors that they want for the priority of the set task (low, medium, high) The defaults are set in the css (in classes named ".low"".med"".high") and I have it set up already to change the color of the task if it is already in the table.

Although this first part works, the second issue is that tasks added later are still given the default color rather than the user chosen one. I'm not sure how to change the background color for all present and future elements of the given priority.

Priority color to change:

<select id='colorChange`' onchange="colorSelected();">
    <option value='Low' selected>Pick Priority Colors</option>
    <option value='Low'>Low</option>
    <option value='Med'>Med</option> 
    <option value='High'>High</option>
</select>

Color chooser:

<input id="color" type="color">

Javascript when new task is added:

if (priority == "Low")
    var style = "low";
else if (priority == "Med")
    var style = "med";
else
    var style = "high";

table.insertAdjacentHTML('beforeend',`
    <tr><td class="tg-rykj ${style}"><input type="radio" class="done"></td>
    <td class="tg-cly1 name ${style}">${txt}</td>
    <td class="dates ${style}">${date}</td>
    <td class="tg-cly1 ${style}">${priority}</td>
    <td class="tg-cly1 ${style}">${category}</td>
    <td>
        <img id="delete" src="img/delete.png" 
        onclick="this.parentNode.parentNode.parentNode.style.display = 'none'; 
        updateTable();">
    </td>
    </tr>`);

JS to change elements already in table:

function colorSelected () {
        var color = document.getElementById("color").value;
        var select = document.getElementById('colorChange').value;
        if (select == "Low")
            var style = document.getElementsByClassName('low');
        else if (select == "Med")
            var style = document.getElementsByClassName('med');
        else
            var style = document.getElementsByClassName('high');
        for(var i = 0; i < style.length; i++){
            style[i].style.backgroundColor = color;
        }
}

Images: