JSFiddle - React, Tailwind, and code Playground

by Serge Zahharenko

HTML

<div class="both">
    <textarea data-id="1" name="t1">Value 1</textarea>
    <input type="checkbox" value="checkbox1-1" 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" checked="checked" name="c2">
    <input type="checkbox" value="checkbox2-2" 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" checked="checked" name="c3">
    <input type="checkbox" value="checkbox3-2" name="c3">
    <input type="checkbox" value="checkbox3-3" name="c3">
</div>

JavaScript

var data = []
$(document).ready(function(){
    $('.both').each(function(){
        ta = $(this).children('textarea').val();
        cb = $(this).children('input:checked').val()
        data.push({t:ta,c:cb})
    });
    $.each(data, function(index, value){
        $('body').append('<p>t:'+value.t+' c: '+value.c+'</p>');
    })
})