jQuery: Add Array Index Value in Output

I'm new to jQuery & JavaScript.

Managed to get the following code to work such that it adds a new text input field depending upon the no. selected by the user from a (previous) drop-down select field.

<script>
$(function() {

  var input = $('<input placeholder="Enter Name or Title..." type="text" required/>');
  var newFields = $('');

  $('#qty').bind('blur keyup change', function() {
    var n = this.value || 0;
    if (n + 1) {
      if (n > newFields.length) {
        addFields(n);
      } else {
        removeFields(n);
      }
    }
  });

  function addFields(n) {
    for (i = newFields.length; i < n; i++) {
      var newInput = input.clone();
      newFields = newFields.add(newInput);
      newInput.appendTo('#newFields');
    }
  }

  function removeFields(n) {
    var removeField = newFields.slice(n).remove();
    newFields = newFields.not(removeField);
  }
});
</script>

However, in the <input placeholder="Enter Subject or Title..." type="text" required/>, I want to add two attributes/parameters for each field that gets added:

1. first is a name="subject1", name="subject2" & so on for each input field

Like, the output input tag should be <input placeholder="Enter Subject or Title..." type="text" name="subject1" required/> for the first field

2. Second is a field title ("Subject 1", "Subject 2" & so on) just before the <input> tag
   Like, the output input tag should be "Subject 1: <input placeholder="Enter Subject or Title..." type="text" name="subject1" required/>" for the first field

Any inputs please on how to achieve that?

Here is a way to add a subject title and the name property.

You can use string concatenation to achieve it with the variable i.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(function() {
  $('#qty').bind('blur keyup change', function() {
    var n = this.value || 0;
    createFields(n)
  });

  function createFields(n) {
    $("#newFields").empty(); //Empty the list of fields

    for (var i = 1; i <= n; i++) {
      var fieldWrapper = $('<div class="fieldwrapper"/>'); //Create a wrapper
      var name = $("<p>Subject " + i + "</p>"); //Create the subject title
      var input = $('<input name="Subject' + i + '" placeholder="Enter Name or Title..." type="text" required />'); //Create the input

      fieldWrapper.append(name); //Add the title
      fieldWrapper.append(input); //Add the input
      $("#newFields").append(fieldWrapper); //Add the group to the list
    }
  }

});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="qty" type="number" />
<div id="newFields">

</div>

<!-- end snippet -->