createElements = (metadata) => {
    let elements = ``;
    Object.entries(metadata).forEach((entry) => {
        elements += `
        <div>
        <span id='edit-icon'></span>
        <div><span id='command'>${entry[0]}</span>
        <span id='keyword'></span>
        </div>
    </div>
    `;
    });
    return `<div id="preference" class="customScroll">${elements}</div>`;
}
function to generate the specific HTML for the hotkey panel
@param {object} metadata keycombo object