JSFiddle - React, Tailwind, and code Playground

by moron

HTML

<div class="input-LinksEndAnchor">
            <ul class="input-LinksEndAnchor__form-inputList">
                <li class="input-LinksEndAnchor__form-inputList-item">
                    <form class="input-LinksEndAnchor__form" action="">
                        <input type="url" name="url" class="input-LinksEndAnchor__form-inputLink" />
                        <input type="text" name="text" class="input-LinksEndAnchor__form-inputAnchor" />
                        <p><span class="Add-Input" title="добавить анкор">добавить aнкор</span></p>
                    </form>
                </li>
                <li class="input-LinksEndAnchor__form-inputList-item-AddItem">
                    <span class="Add-Item" title="добавить ссылку на продвигаемую страницу">добавить еще ссылку</span>
                </li>
            </ul>
            <div class="input__form-submit">
                <span class="input__form-submit-title">запустить</span>
            </div>
        </div>

CSS

.input-LinksEndAnchor{
overflow: hidden;
width: 50%;
float: left;
margin: 20px;
}

    .input-LinksEndAnchor__form{
    width: 100%;
    }
    
        .input-LinksEndAnchor__form-inputList{
        list-style: none;
        padding-left: 0;
        }


        .input-LinksEndAnchor__form-inputLink{
        width: 250px;
        background: -moz-linear-gradient(center bottom , rgba(0, 0, 0, 0.06), transparent 80px) repeat scroll 0 0 transparent;
        border-width: 1px;
        box-sizing: border-box;
        border-radius: 2px 2px 2px 2px;
        }
        
        .input-LinksEndAnchor__form-inputAnchor{
        width: 200px;
        margin-left: 50px;
        margin-top: 10px;
        background: -moz-linear-gradient(center bottom , rgba(0, 0, 0, 0.06), transparent 80px) repeat scroll 0 0 transparent;
        border-width: 1px;
        box-sizing: border-box;
        border-radius: 2px 2px 2px 2px;
        }
        
            .input-LinksEndAnchor__form-inputList-item p{
            margin-top: 0;
            text-align: right;
            width: 80%;
            margin-left: 40px;
            }
                .input-LinksEndAnchor__form-inputList-item span{
                border-bottom: 1px dotted;
                cursor: pointer;
                font-size: 12px;
                color: #DD4B39;
                }
                
        .input-LinksEndAnchor__form-inputList-item-AddItem span{
        border-bottom: 1px dotted;
        cursor: pointer;
        font-size: 12px;
        color: #DD4B39;
        margin-left: 3px;
        }

            
    .input__form-submit{
    color: #fff;
    background-color: #4D90FE;
    display: inline-block;
    width: auto;
    padding: 3px;
    height: 22px;
    cursor: pointer;
    border: 1px solid #4D90FE;
float: right;
    }

JavaScript

function inputToArr(){
    var inputArr = {};//новый массив(объект)
    var formInputArr = $('.input-LinksEndAnchor form').serializeArray();
 console.log(formInputArr);          
}




$('.input__form-submit').click(
    function(){
        inputToArr()
    }
);













/* Добавление инпутов */

function addInput(){
    var inputToInsert = '<input type="text" name="text" class="input-LinksEndAnchor__form-inputAnchor" />';
    $(this).parent().before(inputToInsert);
}

function addItem(){
    var itemToInsert = '<li class="input-LinksEndAnchor__form-inputList-item"><form action="" class="input-LinksEndAnchor__form"><input type="url" name="url" class="input-LinksEndAnchor__form-inputLink" /><input type="text" name="text" class="input-LinksEndAnchor__form-inputAnchor" /><p><span class="Add-Input" title="добавить анкор">добавить</span></form></p></li>'
    $(this).parent().before(itemToInsert);
}

$('.Add-Input').live('click', addInput);
$('.Add-Item').live('click', addItem);