JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<h2>Ftp path To http path</h2>
<table>
  <tr>
    <td><label for="http_path">http base path</label></td>
    <td><input id="http_path" type="text"> (e.g., http://example.com)</td>
  </tr>
  <tr>
    <td><label for="ftp_path">ftp path</label></td>
    <td><input id="ftp_path" type="text"> (e.g., ftp://username@domainOrIp/path)</td>
</tr>
  <tr>
    <td><label for="output">output</label></td>
    <td><input id="output" type="text"></td>
  </tr>
</table>

CSS

#http_path,#ftp_path{
  width : 200px;
}
#output{
  width : 500px;
}

JavaScript

function setCookie(cname, cvalue, exdays) {
    //w3schools.com
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
} 
function getCookie(cname) {
		//w3schools.com
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
} 

$(function(){
	$('#http_path').val(getCookie('http_path'));
	$('#http_path,#ftp_path').change(function(e){
  		setCookie('http_path',$('#http_path').val(),365);
  		$('#output').val(
      		$('#http_path').val() 
          	+ '/' +
      		$('#ftp_path').val().split('/').slice(3).join('/')
       );
  });
  $('#output').click(function(){
    $(this).select();
  });
});