jQuery addClass example

Change class name on click in jQuery

HTML

<script src="jquery-ui"></script>
<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  </head>

  <body>
    <form method="POST" action="" name="loginin">
      <div class="controls">
        <div class="d1">
          <div class="entry input-group">
            <input list="pronama" name="proPlace[]" type="text" placeholder="Place" class="form-control">
            <input type="text" class="datepicker" class="form-control" name="date[]">
            <span class="input-group-btn">
                <button class="btn btn-success btn-add" type="button">
                    <span class="fa fa-plus"></span>
            </button>
            </span>
          </div>
        </div>
      </div>
      <button type="submit" name="login" class="btn btn-lg btn-success btn-block">Sign In</button>
    </form>
  </body>

</html>

JavaScript

$(function() {
          $(".datepicker").datepicker({
            dateFormat: 'dd-mm-yy'
          });
        });
        $(function() {
          $(document).on('click', '.btn-add', function(e) {
            e.preventDefault();

            var controlForm = $('.controls .d1:first'),
              currentEntry = $(this).parents('.entry:first'),
              newEntry = $(currentEntry.clone()).removeAttr('id').appendTo(controlForm);
            newEntry.find('input').val('').removeAttr('id')
            .removeClass('datepicker hasDatepicker').datepicker({
              dateFormat: 'dd-mm-yy',
            });
            controlForm.find('.entry:not(:last) .btn-add')
              .removeClass('btn-add').addClass('btn-remove')
              .removeClass('btn-success').addClass('btn-danger')
              .html('<span class="fa fa-minus"></span>');
          }).on('click', '.btn-remove', function(e) {
            $(this).parents('.entry:first').remove();
            e.preventDefault();
            return false;
          });

        });