JSFiddle - React, Tailwind, and code Playground

by Adem GENC

HTML

<form name="myForm" action="" method="POST">

<input type=text name="floor[1]" size="5" data-info="A">
<input type=text name="total_number_of_flats[1]" size="5" data-info="A">
<input type=text name="number_of_subscribers[1]" size="5" data-info="A">
<select size="1" name="shaft[1]" data-info="A">
<option value="1">1 Shaft</option>
<option value="2">2 Shaft</option>
</select>
<input type=text name="panel_floors[1]" size="5" data-info="A">
<input type=text name="number_of_cables[1]" size="5" data-info="A">
<select size="1" name="fiber_optic[1]" data-info="A">
<option value="1">1 Points</option>
<option value="2">2 Points</option>
<option value="3">3 Points</option>
<option value="4">4 Points</option>
<option value="5">5 Points</option>
<option value="6">6 Points</option>
<option value="7">7 Points</option>
<option value="8">8 Points</option>
<option value="9">9 Points</option>
<option value="10">10 Points</option>
</select>

<br>

<input type=text name="floor[2]" size="5" data-info="B">
<input type=text name="total_number_of_flats[2]" size="5" data-info="B">
<input type=text name="number_of_subscribers[2]" size="5" data-info="B">
<select size="1" name="shaft[2]" data-info="B">
<option value="1">1 Shaft</option>
<option value="2">2 Shaft</option>
</select>
<input type=text name="panel_floors[2]" size="5" data-info="B">
<input type=text name="number_of_cables[2]" size="5" data-info="B">
<select size="1" name="fiber_optic[2]" data-info="B">
<option value="1">1 Points</option>
<option value="2">2 Points</option>
<option value="3">3 Points</option>
<option value="4">4 Points</option>
<option value="5">5 Points</option>
<option value="6">6 Points</option>
<option value="7">7 Points</option>
<option value="8">8 Points</option>
<option value="9">9 Points</option>
<option value="10">10 Points</option>
</select>

<br>

<input type=text name="floor[3]" size="5" data-info="C">
<input type=text name="total_number_of_flats[3]" size="5" data-info="C">
<input type=text...

JavaScript

$("#myForm").click(function(){
    var floor_block                     = $("input[name^='floor']").map(function(){return ($(this).attr('data-info'));}).get();
    var floor                           = $("input[name^='floor']").map(function(){return $(this).val();}).get();

    var total_number_of_flats_block     = $("input[name^='total_number_of_flats']").map(function(){return ($(this).attr('data-info'));}).get();
    var total_number_of_flats           = $("input[name^='total_number_of_flats']").map(function(){return $(this).val();}).get();

    var number_of_subscribers_block     = $("input[name^='number_of_subscribers']").map(function(){return ($(this).attr('data-info'));}).get();
    var number_of_subscribers           = $("input[name^='number_of_subscribers']").map(function(){return $(this).val();}).get();

    var shaft_block                     = $("input[name^='pano_shaft']").map(function(){return ($(this).attr('data-info'));}).get();
    var shaft                           = $("input[name^='pano_shaft']").map(function(){return $(this).val();}).get();

    var panel_floors_block              = $("input[name^='panel_floors']").map(function(){return ($(this).attr('data-info'));}).get();
    var panel_floors                    = $("input[name^='panel_floors']").map(function(){return $(this).val();}).get();

    var number_of_cables_block          = $("select[name^='number_of_cables']").map(function(){return ($(this).attr('data-info'));}).get();
    var number_of_cables                = $("select[name^='number_of_cables'] option:selected").map(function(){return $(this).val();}).get();

    var fiber_optic_block               = $("select[name^='fiber_optic']").map(function(){return ($(this).attr('data-info'));}).get();
    var fiber_optic                     = $("select[name^='fiber_optic'] option:selected").map(function(){return $(this).val();}).get();

    if(floor == ""){
        alert("You did not enter the total number of floors of " + floor_block + "...