JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" data-value="1" class='num1'  onclick="changebtn(this);"/>
    <input type="button" data-value="2" class='num2'  onclick="changebtn(this);"/>
    <input type="button" data-value="3" class='num3'  onclick="changebtn(this);"/>
    <!-- second line-->
    <input type="button" data-value="4" class='num1'  onclick="changebtn(this);"/>
    <input type="button" data-value="5" class='num2'  onclick="changebtn(this);"/>
    <!--third line-->
    <input type="button" data-value="6" class='num1'  onclick="changebtn(this);"/>
    <input type="button" data-value="7" class='num2'  onclick="changebtn(this);"/>
    <input type="button" data-value="8" class='num3'  onclick="changebtn(this);"/>

<div style="display: none;" id="button1" class="custom_pay_button1">1</div>
<div style="display: none;" id="button2" class="custom_pay_button2">2</div>
<div style="display: none;" id="button3" class="custom_pay_button3">3</div>
<div style="display: none;" id="button4" class="custom_pay_button4">4</div>
<div style="display: none;" id="button5" class="custom_pay_button5">5</div>
<div style="display: none;" id="button6" class="custom_pay_button6">6</div>
<div style="display: none;" id="button7" class="custom_pay_button7">7</div>
<div style="display: none;" id="button8" class="custom_pay_button8">8</div>

JavaScript

function changebtn (element){
	var selector = '.' + element.classList[0];
	var inputs = document.querySelectorAll(selector);
  var len = inputs.length;
  
  for(var i = 0; i <= len; i++){
  	var div = document.getElementById('button' + inputs[i].dataset.value );
    
    div.style.display = 'block';
    
  }
  
}