您需要将append()新字段append()到父div中，父div包含**+**符号的click()事件上的字段。

$(document).ready(function() {
var i = 1;
  $('.add').on('click', function() {
    var field = '<br><div>Link URL '+i+': <input type="text" name="blog_linku_one[]"> &nbsp; Link Name '+i+':  <input type="text" name="blog_linkn_one[]"></div>';
    $('.appending_div').append(field);
    i = i+1;
  })
})

.add{
  cursor: pointer;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

    More Links: <span class="fa fa-plus add"></span>
    <div class="appending_div">
      <div>
      Link URL: <input type="text" name="blog_linku_one[]"> &nbsp; Link Name:  <input type="text" name="blog_linkn_one[]">
      </div>
    </div>

请尝试以下代码。它将从DOM中获取ID为“container”的元素，并创建新字段并将该字段附加到Container。

//Get container from DOM
var container = document.getElementById("container");

//Create an <input> element, set its type and name attributes 
var input = document.createElement("input");
input.type = "text";
input.name = "blog_linku_" + i;
input.required = "required";
//Add Element to div
container.appendChild(input);

您可以使用此代码段创建任意数量的元素。希望这会有所帮助。

您应该尝试RepeaterJS插件，它会自动处理添加更多输入功能。
在HTML中，需要四个属性来完成此功能。
1.data-repeater-list，将名称转换为数组，如tasks[0][item]，tasks[1][item]。
1.data-repeater-item此属性 Package 的元素，您希望重复。
1.data-repeater-create应用到create按钮。
1.data-repeater-delete应用于删除按钮。
在JavaScript中，只需初始化repeater函数**$（'. repeater'）.repeater（）**

$(document).ready(function () {
  $('.repeater').repeater({
    // (Optional)
    // start with an empty list of repeaters. Set your first (and only)
    // "data-repeater-item" with style="display:none;" and pass the
    // following configuration flag
    initEmpty: false,

    // (Optional)
    // Removes the delete button from the first list item, [defaults to false]
    isFirstItemUndeletable: true,

    // (Optional)
    // Call while add the element
    show: function () {
      $(this).slideDown();
      $(this).find('[data-repeater-create]').remove()
    },

    // (Optional)
    // Call while delete the element
    hide: function (deleteElement) {
      if (confirm('Are you sure you want to delete this element?')) {
        $(this).slideUp(deleteElement);
      }
    },
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>

<form class="repeater">
  <label>Tasks:</label><br>
    <div data-repeater-list="tasks">
      <div data-repeater-item>
        <input type="text" name="item" placeholder="Type your task...." />
        <button type="button" data-repeater-delete>Delete</button>
        <button type="button" data-repeater-create>Add</button>
      </div>
    </div>
</form>