[BETEPAH]

Вопрос, как мне определить у какого именно <li> менять класс?

проставить у них ID соответствующее свойству.

<style>
ul {
	display: inline-block;
	width: 200px;
}
.that {
	font-weight: bold;
}
.active {
	color: #333;
}
.unactive {
	color: #aaa;
}
</style>
<input type="button" id="change" value="сменить набор" /> <br />
<ul id="sets">
	<li class="that">первый бокал</li>
	<li>второй бокал</li>
	<li>третий бокал</li>
</ul>
<ul id="ingradients">
	<li id="aperitif" class="active">аперитив</li>
	<li id="hot" class="active">горячее</li>
	<li id="milk" class="unactive">молоко</li>
</ul>

<script>
var glasses = [
	{
		aperitif : true,
		hot : true,
		milk : false
	},{
		aperitif : true,
		hot : false,
		milk : true
	},{
		aperitif : false,
		hot : true,
		milk : false
	}
];
var now = 0;
document.getElementById('change').onclick = function() {
	if (++now > glasses.length -1) now = 0;
	document.getElementsByClassName('that')[0].className = '';
	document.getElementById('sets').getElementsByTagName('li')[now].className = 'that';
	var set = glasses[now];
	for (var key in set) {
		document.getElementById(key).className = (set[key] === true) ? 'active': 'unactive';
	}
}
</script>