Same function with different numbers

who can help me?
I have 30 buttons if you click on button 1 element 1 has to show if you click on button 2 element 2 has to show. and so on

now i don't want to put the same code 30 times (example 1) with only different numbers. I think it can be shorter (example 2)

Does anyone know how I can best do this?

example 1:

$("#O1").click(function() {
  KSlevel = 1;
  alert(KSlevel);
  $('#ks' + KSlevel).fadeIn(200);
});

$("#O2").click(function() {
  KSlevel = 2;
  alert(KSlevel);
  $('#ks' + KSlevel).fadeIn(200);
});

example2:

$("#OX").click(function() {
  KSlevel = X;
  alert(KSlevel);
  $('#ks' + KSlevel).fadeIn(200);
});

There you go:

HTML:

<button class="test" id="1">click</button>
<p id="p1" style="display: none;">1</p>

<button class="test" id="2">click</button>
<p id="p2" style="display: none;">2</p>

<button class="test" id="3">click</button>
<p id="p3" style="display: none;">3</p>

<button class="test" id="4">click</button>
<p id="p4" style="display: none;">4</p>

JQuery:

$('.test').click((e)=>{
     $(`#p${e.target.id}`).fadeIn();
});

You can also run a function on HTML's onClick attribute and put an id in the function's parameter. Rest of the function would be the same.