JSFiddle - React, Tailwind, and code Playground

by lshettyl

HTML

<div data-role="collapsible" data-theme="b" data-collapsed="true">
    <h1>#1</h1>

    <div data-role="fieldcontain">
      <label for="ScoreID"> ID:</label>
      <input type="text" name="ScoreID" id="ScoreID" value="" />
    </div>
    <div data-role="fieldcontain">
      <label for="ScorePoints">(pts):</label>
      <input type="text" name="ScorePoints" id="ScorePoints" value="" />
    </div>
    <div data-role="fieldcontain">
      <label for="ScoreCourse">Course:</label>
      <input type="text" name="ScoreCourse" id="ScoreCourse" value="" />
    </div>
    <button id="bb">CC</button>
</div>

JavaScript

$(function(){

var totalInputs = $('div[data-role="fieldcontain"] input:text').length;
var nonEmptyInputs = $('div[data-role="fieldcontain"] input:text').filter(function(){return $.trim($(this).val()) !== ""}).length;
    
});