JSFiddle - React, Tailwind, and code Playground

HTML

<span><a href="#" id="add"> + Add more</a></span>

<div class="toAdd" style="display:none;">
    <input size="20" id="high_light2" type="text" />
    </div>
    <div class="toAdd" style="display:none;">
        <input size="20" id="high_light3" type="text" />
    </div>
    <div class="toAdd" style="display:none;">
        <input size="20" id="high_light4" type="text" />
    </div>

JavaScript

$('#add').click(function () {
    $('.toAdd').each(function () {
        if ($(this).css('display') == 'none') {
            $(this).css('display', 'block');
            return false;
        }
    });
    var i = 0;
    $('.toAdd').each(function () {
        if ($(this).css('display') != 'none') {
            i++;
        }
    });

    if (i == 3) $('#add').hide();
});