JSFiddle - React, Tailwind, and code Playground

HTML

<div class="both">
    <textarea data-id="1" name="t1">Value 1</textarea>
    <input type="checkbox" value="checkbox1" checked="checked" name="c1">
    <input type="checkbox" value="checkbox1-2"  name="c1">
    <input type="checkbox" value="checkbox1-3"  name="c1">
</div>
<div class="both">
    <textarea data-id="2" name="t2">Value 2</textarea>
    <input type="checkbox" value="checkbox2-1"  name="c2">
    <input type="checkbox" value="checkbox2" checked="checked" name="c2">
    <input type="checkbox" value="checkbox2-3" name="c2">
</div>
<div class="both">
    <textarea data-id="3" name="t3">Value 3</textarea>
    <input type="checkbox" value="checkbox3-1"  name="c3">
    <input type="checkbox" value="checkbox3-2" name="c3">
    <input type="checkbox" value="checkbox3-3" checked="checked" name="c3">
</div>

JavaScript

var data = [];
$(document).ready(function() {
    
        var cb = $(this).children('input').length();
        
});