JSFiddle - React, Tailwind, and code Playground

by shubh0602

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <input type='checkbox' id="100" class='dummy-class' />User 100</div>
        <div class="panel-body"> <span>First Name</span>

            <input type='text' value='John' name='first'>
            <br/>
            <br/> <span>Last Name</span>

            <input type='text' value='Degnome'>
            <br/>
            <br/> <span>Age</span>

            <input type='text' value='20'>
            <br/>
            <br/>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <input type='checkbox' id="101" class='dummy-class' />User 101</div>
        <div class="panel-body"> <span>First Name</span>

            <input type='text' value='Eric'>
            <br/>
            <br/> <span>Last Name</span>

            <input type='text' value='Bishop'>
            <br/>
            <br/> <span>Age</span>

            <input type='text' value='22'>
            <br/>
            <br/>
        </div>
    </div>
    <input type='button' class='btn btn-default SaveDetails' value='Save' />
</div>

JavaScript

//Creating object of selected user
//


var selected = new Array();
$('.dummy-class ').click(function (e) {
    if (this.checked) {
        selected.push(this);
    } else {
        var index = selected.indexOf(this);
        selected.splice(index, 1);
    }
    console.log(selected);
});

//Access values of selected elements while saving
$('.SaveDetails').click(function () {
    console.log(selected);
    var tempArray = [];
    $.each(selected, function (index, value) {
    var $panel = $(this).closest('.panel');
    console.log($panel.find('input[name="first"]').val())

    });

});