如何在单个按钮上显示两个值的可单击预定



im在HTML和CSS中非常新,基本上我有两个不同的值1个申请人和2个位置的数字我的基本方法是显示以下内容:

<button type="button" id="btnInf"></button> 

这是我的jQuery:

$("#btnInf").html('<span style="color:black;font-size:12px" >Number of Applicants:</span>
              <span style="color:black;font-size:23px">' +0+ '</span>
              </br><span style="color:brown;font-size:12px">Number of Positions:</span>
              <span style="color:brown;font-size:23px">' + 8 + '</span>');

由于我是新手,我不知道如何在按钮上显示它们,而是使用不智能的方法,我想在单点可单击的按钮或任何东西上显示它们,这些按钮或任何东西都显示了按颜色和数字显示的百分比; <<<<

这是NECER代码:

<button type="button" id="btnInf">
   <span class="small-font a" >Number of Applicants:</span>
   <span class="big-font a">0</span>
              </br>
   <span class="small-font b">Number of Positions:</span>
   <span class="big-font b">8</span>
</button>

CSS:

.small-font{
font-size:12px
}
.big-font{
font-size:23px
}
.a{
color:black;
}
.b{
color:brown
}