JSFiddle - React, Tailwind, and code Playground

HTML

<input style="display:none" id="countspr1" name="checkcountsp[]" type="text" maxlength="2" size="1" value="" > 
<input type="checkbox" id="spr1" name="checksp[]" onchange="handleChange(this)" value="Товар 1">Товар 1
<br>
<input style="display:none" id="countspr2" name="checkcountsp[]" type="text" maxlength="2" size="1" value=""/> 
<input type="checkbox" id="spr2" name="checksp[]" onchange="handleChange(this)" value="Товар 2">Товар 2
<br>
<input style="display:none" id="countspr3" name="checkcountsp[]" type="text" maxlength="2" size="1" value=""/> 
<input type="checkbox" id="spr3" name="checksp[]" onchange="handleChange(this)" value="Товар 3">Товар 3

JavaScript

function handleChange( ctx ) {
  var el = ctx.previousElementSibling;
   if( ctx.checked && el.nodeName.toLowerCase() === "input" ){
		el.style.display = 'inline';
        el.value = 1; 
		el.focus();
	} else{
		el.style.display='none';
	 }
   }