Kenapa hanya tombol pertama saja yg berfungsi (JAVASCRIPT)?

kenapa hanya tombol pertama saja yg berfungsi? padahal semua button Ubah memppunyai class yg sama coba agan klik tombol tambah dulu lalu klik tombol Ubah yg baru dibuat pasti fungsi ngga jalan

<ul>
	<li class="wrap">
		TEXT
		<button class="ubah">Ubah</button>
	</li>
	<li>
		<button class="tambah">Tambah</button>
	</li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
	let i = 0;
	let color = ["red","blue","green"];
	$(".ubah").click(function() {
		$(this).parent().css("background",color[i]);
		i++;
		if(i>2) {
			i=0;
		}

	});

	let el = `<li class="wrap">TEXT<button class="ubah">Ubah</button></li>`;
	$(".tambah").click(function() {
		$(".wrap").append(el);
	})
</script>