JSFiddle - React, Tailwind, and code Playground

by Kabir Hossain

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>
<form action="#" class="form-horizontal group-border" method="post" accept-charset="utf-8">
<div class="col-lg-12 mt15 add-row">
                    <div class="form-group">
                        <span class="col-lg-3 col-md-4 col-sm-3 col-xs-4">Product</span>
                                                    <span class="col-lg-1 col-md-2 col-sm-3 col-xs-4 clr">Color</span>
                                                    <span class="col-lg-2 ml30 col-md-2 col-sm-3 col-xs-4">Godown</span>
                        <span class="col-lg-1 ">Stock</span>
                        <span class="col-lg-1 ">Quantity</span>
                        <span class="col-lg-1">Price</span>
                        <span class="disc">Disc%</span>
                        <span class="per ml15">Per</span>
                        <span class="amount ml25">Amount</span>
                    </div>
                    <!-- End .form-group  -->
                    <div class="form-group">
                            <div class="row">
                            <div class="col-log-12">
                                <a tabindex="-1" href="#x" class="pull-left x"><i class="icomoon-icon-close color-red"></i></a>
<select name="product[]" class="product select2">
<option value="" selected="selected">select one</option>
<option value="8">Bed0</option>
<option value="5">Bed1</option>
<option value="7">Bed11</option>
<option value="6">Bed2</option>
<option value="9">Bed7</option>
<option value="2">Chair4</option>
<option value="4">Chair43</option>
<option value="3">Chair45</option>
</select>
<select name="color[]" class="color select2">
<option value="" selected="selected">select one</option>
<option value="2">Black</option>
</select>
<select name="godown[]" class="godown select2">
<option value=""...

CSS

.form-left{
        margin-left: 1%;
    }    
    .lavel{
        margin-left: -1%;
    }

    .note-label{
        margin-left: -20%;
    }

    .note-box{
        margin-left: -80%;
        width: 96px;
    }
    .note-right{
        float: right;
        margin-top: -15%;
    }
    textarea.form-control {
        height: 86px;
    }
    .product{
         width: 25%;
    }
    .godown,.sales_ledger{
         width: 20%;
    }
    .color{
        width: 12%;
    }
    .select2-container .select2-choice .select2-arrow {
        position: absolute;
        right: 0;
        top: 0;
        width: 10px;
    }
    .form-horizontal.group-border .form-group, .form-inline.group-border .form-group, .form-horizontal, .form-group {
        padding-bottom: 2px;
    }
    .stock,.quantity,.price,.amount,.disc,.per,.commission_bal{
        width: 6%;
    }
    .total-bar-up{
       margin-left: 55%; 
    }
    .total-bar-bottom{
       margin-left: 34%; 
    }
    .total_qty,.total_com_amt{
        margin-left: 5%;
    }
    .total_amt{
        margin-left: 21%;
    }
    .input-alert{
        border-color: red;
        background: red;
    }
    .commission{
        margin-left: 25%;
    }
    .commission_label{
        margin-left: 72px;
        margin-right: 50px;
    }
    .clr{
        margin-left: -25px;
    }
    .qtylabel{
        margin-left: -45px;
    }
    .content-span-right{
        margin-right: 1px !important;
    }
    .sign{
        width: 6%;
    }

JavaScript

$(document).ready(function() {
        $('.add-row').on('change','.godown',function(){
            var pDiv = $(this).closest('div');
            var product = pDiv.children('select:eq(0)').val();
            var godown = pDiv.children('select:eq(2)').val();           
             pDiv.children('input:eq(0)').val(15);
        });
       $('.distr_center').on('click',function(){
            var distr_center = $(this).val();
            $('.dis_godown_id').val(distr_center);
            var name = $('.dis_godown_id').find('option:selected').text();
            $('.godown').select2('val',name);//$('.godown').val(name);//
        });  
       
       $('.add-row').on('click','.x',function(){
            $(this).closest('.form-group').remove();
        });
     
//
   var c = 0;
   $('.btn-add').on('click',function(){
      $('.add-more').before('<div class="form-group">\n\
           <div class="row">\n\
              <div class="col-log-12">\n\
                   <a href="#x" class="pull-left x"><i class="icomoon-icon-close color-red"></i></a>\n\
<select class="product select2'+c+' sm-select1">\n\
    <option value="">select one</option>,\n\
    <option value="8">Bed0</option>,\n\
    <option value="5">Bed1</option>\n\
</select>\n\
<select class="color select3'+c+' sm-select1">\n\
    <option value="">select one</option>,\n\
    <option value="2">Black</option>\n\
</select>\n\
<select class="godown select4'+c+'  sm-select1">\n\
    <option value="">select one</option>,\n\
    <option value="1">Primary</option>,\n\
    <option value="2">Godown-Barisal</option>,\n\
</select>\n\
 <input class="stock" type="text" value="" name="stock[]" disabled="">\n\
 <input class="quantity" type="text" value="" name="quantity[]">\n\
 <input class="price" type="text" value="" name="price[]">\n\
 <input class="disc" type="text" value="" name="disc[]">\n\
 <input class="per" type="text" value="" name="per[]">\n\
 <input class="amount" type="text" value="" name="amount[]"...