window.jQuery(document).ready(function() {
var max_fields_limit = 10; //set limit for maximum input fields
var x = 1; //initialize counter for text box
window.jQuery('.add_more_button').click(function(e){ //click event on add more fields button having class add_more_button
e.preventDefault();
if(x < max_fields_limit){ //check conditions
x++; //counter increment
window.jQuery('.input_fields_container').append('<div><textarea id="tttt" name="product_name[]"></textarea><a href="#" class="remove_field" style="margin-left:10px;">Remove</a></div>'); //add input field
}
tinymce.init({
selector: "#tttt",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
});
window.jQuery('.input_fields_container').on("click", ".remove_field", function(e) { //user click on remove text links
e.preventDefault();
window.jQuery(this).parent('div').remove();
x--;
})
});
<html>
<head>
<script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<div class="input_fields_container">
<div>
<input type="text" name="product_name[]">
<button class="btn btn-sm btn-primary add_more_button">Add More Fields</button>
</div>
</div>
</html>
<script type="text/javascript" src="https://coinpedia.org/ico-token/assets/js/tinymce_js/tinymce/tinymce.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>