JSFiddle - React, Tailwind, and code Playground

by dzorz

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/css/bootstrap-editable.css">
<script src="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/js/bootstrap-editable.js"></script>
<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
    <div class="container">    
        <input type="text" class="main_activity" id="main_activity" name="main_activity" placeholder="Main activity">
        <div class="parentToDelegate">
            <a href="#" id="privacy" class="privacy" data-type="select" data-pk="1" data-value="1" data-original-title="Select visibility">public</a>
            <input type="text" id="privacy_result" class="privacy_result" value="1"/>     
        </div>
        
        <div class="row">
            <div id="InputsWrapper">
            </div>
        </div>
        <div class="row">
            <span id="AddMoreBox" class="btn btn-info pull-right"><i class="icon-plus"></i>Add More</span>
        </div>
   </div>

CSS

.container{
       padding-top:100px
    }
    
    .privacy_result, .privacy_dynamic{
        width: 40px;
    }
    
    .main_activity, .other_activity{
        width: 140px;
    }
    
    .parentToDelegate{
        display:inline;
    }
    
    .icon-remove-add{
        margin-left: -10px;
        margin-top: -8px;
    }
    
    .parent-dynamic{
        display: inline;
        top: -5px;
        left: 10px;
        position: relative;
    }

JavaScript

//x-editable
    $('.privacy').editable({
        showbuttons: false,
        unsavedclass: null,
        type: 'select',
        inputclass: 'input-medium privacy-select',
        source: [
            {value: 1, text: 'public'},
            {value: 2, text: 'approved contacts only'},
            {value: 3, text: 'matching contacts'},
            {value: 4, text: 'invisible'}
        ],
 
    });

    $(function(){
            $('.parentToDelegate').on('change keyup blur', ".privacy-select", function(){
                $('.privacy_result').val($('.privacy-select').val());
            }).blur();
        });

    //dynamic fields
    $(document).ready(function() {

    var MaxInputs       = 5; //maximum input boxes allowed
    var InputsWrapper   = $("#InputsWrapper"); //Input boxes wrapper ID
    var AddButton       = $("#AddMoreBox"); //Add button ID

    var x = InputsWrapper.length; //initlal text box count
    var FieldCount=1; //to keep track of text box added

    $(AddButton).click(function (e)  //on add input button click
    {
    //         if(x <= MaxInputs) //max input box allowed
    //         {
            FieldCount++; //text box added increment
            //add input box
            $(InputsWrapper).append('\
            <div>\
            <input type="text" class="other_activity"\
            name="other_activity" id="other_activity"\
            placeholder="Other activity" style="margin:0px 15px 10px 0px"/>\
            <a href="#" class="removeclass"><i class="icon-remove icon-remove-add"></i></a>\
                <div class="parentToDelegate-dynamic'+ FieldCount +' parent-dynamic">\
                    <a href="#" id="privacy-dynamic" class="privacy-dynamic'+ FieldCount +'" data-type="select" data-pk="1" data-value="1" data-original-title="Select visibility">public</a>\
                    <input type="text" id="privacy-result-dynamic'+ FieldCount +'" name="privacy-result-dynamic'+ FieldCount +'" class="privacy-result-dynamic'+ FieldCount...