JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div id="VideoWrapper">
    <a  href="#" id="AddMoreVideo" class="help-box icon-plus">add</a>
    <div class="VideoRemove" style="position:relative;clear:both;">
        <div class="filesmap">
            <input type="text" name="video[]" class="form-control" value="/video/golden.flv" id="video-0" tabindex="7" />
        </div>	<span class="filesicon">
											<a class="icon-picture boxGetVideo" id="btnChoiceThumbnail" href="./filemanager/dialog.php?type=1&field_id=video-0">filemanager</a>
											</span>
	<span><a class="removeclassVideo icon-minus fa-2x alerts-color" href="#">remove</a></span>

    </div>
    <div class="VideoRemove" style="position:relative;clear:both;">
        <div class="filesmap">
            <input type="text" name="video[]" class="form-control" value="/video/golden2.flv" id="video-1" tabindex="7" />
        </div>	<span class="filesicon">
											<a class="icon-picture boxGetVideo" id="btnChoiceThumbnail" href="
./filemanager/dialog.php?type=1&field_id=video-1">filemanager</a>
											</span>
	<span><a class="removeclassVideo icon-minus fa-2x alerts-color" href="#">remove</a></span>

    </div>
</div>

JavaScript

$(document).ready(function () {

    var MaxInputsVideo = 8; //maximum input boxes allowed
    var InputsWrapper = $("#VideoWrapper input"); //Input boxes wrapper ID
    var AddButton = "#AddMoreVideo"; //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
    {
        e.preventDefault();
        InputsWrapper = $("#VideoWrapper input");
        x = InputsWrapper.length;
        console.log(x+'  '+MaxInputsVideo);
        if (x < MaxInputsVideo) //max input box allowed
        {
            FieldCount++; //text box added increment
            //add input box
            $(InputsWrapper).parents('#VideoWrapper').append('<div class="VideoRemove" style="position:relative;clear:both;"><div class="filesmap"><input type="text" name="video[]" class="form-control" id="video-'+x+'" tabindex="7"  /></div><span class="filesicon"><a class="icon-picture boxGetVideo" href="./filemanager/dialog.php?type=1&field_id=video-'+x+'">filemanager </a> </span><span><a class="removeclassVideo icon-minus fa-2x alerts-color" href="#"> remove</a></span></div>');
            x++; //text box increment
        }
        return false;
    });

    $("body").on("click", ".removeclassVideo", function (e) { //user click on remove text
        console.log(x);
        if (x > 1) {
            $(this).parents('.VideoRemove').remove(); //remove text box
            x--; //decrement textbox
        }
        return false;
    })

});

$('.boxGetVideo').fancybox({
        'width': '75%',
        'height': '90%',
        'autoScale': false,
        'transitionIn': 'none',
        'transitionOut': 'none',
        'type': 'iframe',
        
    });