JSFiddle - React, Tailwind, and code Playground

HTML

<select>
		<option>1</option>
		<option>2</option>
		<option>3</option>
	</select>
	<button>Add</button>

<ul>
		<li class="level1" style="display:none">this is level 1</li>
    <li class="level2" style="display:none">this is level 1</li>
    <li class="level3" style="display:none">this is level 1</li>
	</ul>

CSS

.zeb{
background:#DDD;    
}

JavaScript

$('button').click(function() {
    var lvl = $('select').val();
    var ref = $('li.level' + lvl).last();
    $("<li class='level" + lvl + "'>" + lvl + '</li>').insertAfter(ref);
      
      $('ul li').removeClass('zeb');
      $('ul li:visible:odd').addClass('zeb');
  });