JSFiddle - React, Tailwind, and code Playground

by Hendeca

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="sidebar">
   <ul class="sidebar-nav">
    <li class="sidebar-menu">
     <a>MENU</a>
    </li> 

    <li>
     <a href="#" target="myframe">Link #1</a>
     <button class="delete-link">Delete</button>
    </li> 

    <li>
     <a href="#">Link #2</a>
     <button class="delete-link">Delete</button>
    </li>

    <li>
     <a href="#">Link #3</a>
     <button class="delete-link">Delete</button>
    </li> 

    <li>
     <a href="#">Link #4</a>
     <button class="delete-link">Delete</button>
    </li>
   </ul>
   <div class="input-field">
     <label for="link-title">Enter link title</label>
     <input type="text" class="link-title" name="link-title" placeholder="link Title" />
   </div>

   <div class="input-field">
     <label for="link-title">Enter link URL</label>
     <input type="url" class="link-url" name="link-url" />
   </div>
   <input type="submit" class="add-button" value="Add" />
 </div>

CSS

.delete {
  margin-left: 5px;
}

.input-field {
  margin-bottom: 10px;
}

JavaScript

var $addButton = $('.add-button');
var $sidebarMenu = $('.sidebar-nav');

$(document).on('click', '.delete-link', removeLink);
$addButton.on('click', addLink);

function removeLink(e) {
	var $link = $(e.currentTarget).closest('li');
  $link.remove();
}

function addLink(e) {
	e.preventDefault();
	var $linkTitle = $('.link-title');
  var $linkUrl = $('.link-url');
	var $link = $('<li>').append(
  	$('<a>').attr('href', $linkUrl.val()).text($linkTitle.val()));
  $link.append($('<button>').addClass('delete-link').text('Delete'));
  var $deleteButton = $('.delete-link');
  $sidebarMenu.append($link);
  $linkTitle.val('');
  $linkUrl.val('');
}