JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<div class="panel">
  <input type="text" id="filename" value="Copy of [1] filename">
</div>
<div class="panel">
  <input type="text" id="newfilename" value="">
</div>
<div class="panel">
  <button type="button" id="btnGenerate">
    Get File Name
  </button>
</div>

CSS

.panel{
  display:block;
  padding: 5px 10px;
}
.panel input{
  width:100%;
}

JavaScript

$('#btnGenerate').click(function(){
	var oldname = $('#filename').val();
  if(typeof oldname !== undefined || oldname != ''){
    if(oldname.indexOf('Copy of')>-1){
			var nCount = parseInt(oldname.match(/\[(.*)\]/)[1],10) + 1;
      var file_name = oldname.split('] ')[1];
      
      var newname = "Copy of [" + nCount + "] " + file_name;
    }else{
      var newname = 'Copy of [1] '+oldname;
    }
    
    $('#newfilename').val(newname); 
  }
});