jQuery를 사용하여 숫자로 동적 텍스트 상자를 만드는 방법은 무엇입니까?

$(document).ready(function() {
    //counter = 1;
}).on('click', '.btn-add', function(e) {
    e.preventDefault();
    //counter = counter + 1;

    var controlForm = $('.controls'),
        currentEntry = $(this).parents('.entry:last'),
        newEntry = $(currentEntry.clone()).appendTo(controlForm);

    newEntry.find('input').val('');
    controlForm.find('.entry:not(:first) .btn-add')
        .removeClass('btn-add').addClass('btn-remove')
        .removeClass('text-success').addClass('text-danger')
        .html('-');
    currentEntry.find('.input-box')
        .attr('name', 'subject')
        //.attr('placeholder', 'Materia ' + String(counter));
    controllo();
}).on('click', '.btn-remove', function(e) {
    $(this).parents('.entry:last').remove();
    /*counter = counter - 1
    $(this).parents('.entry').each(function() {
        $(this).parents('.entry:last').attr('placeholder', 'Materia ' + String(counter));
    })*/

    e.preventDefault();
    controllo();
    return false;
});

function controllo() {
    var counter = 1;
    $(".input-box").each(function() {
        $(this).attr('placeholder', 'Materia ' + counter);
        counter++;
    })
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="type-elements" class="controls">
    <div class="form-row entry">
        <div class="form-inline mb-3">
            <a role="button" class="btn btn-link text-success btn-add mr-1" href="">+</a>
            <input type="text" class="form-control mr-1 input-box" placeholder="Materia 1" required name="subject">
        </div>
        <div class="col">
            <select class="custom-select mb-3" required multiple size="3" name="classes">
                <option disabled>Seleziona una o più classi</option>
                <option>2DM</option>
                <option>2AM</option>
                <option>2DM</option>
                <option>2AM</option>
            </select>
        </div>
    </div>
</div>