JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" name="check1" checked disabled value="1">
<input type="checkbox" name="check1"  value="2">
<input type="checkbox" name="check1" value="3">
<input type="checkbox" name="check1" value="4">
<input type="checkbox" name="check1" value="5">
<div id="checkcount"></div>

JavaScript

var contador = function() {
var n = $("input:enabled:checked").length;
var unchecked = 0;
var cb = $(this).index();
$("input:enabled").each(function(i) {
    if ((i < cb) && !($(this).is(":checked"))) {
      ++unchecked;
    }
  })

  if($(this).is(":checked")){
    $('body').append('<input type="text" class="created" name="check1" >');
  }else{
    $('.created').eq($(this).index()-unchecked).remove();
  }

$("#checkcount").text(n + (n === 1 ? " é" : " são") + " selecionadoss");
};
contador();
$("input[type=checkbox]").on("click", contador);