<div class="wrap">
  <form>
    <label>Name:
      <input type="text">
    </label>
    <br>
    <label>Phone:
      <input type="tel">

    </label>
    <div class="btnGroup">
      <button type="button" class="btnNew">NEW</button>
      <button type="button" class="btnSubmit">Submit</button>
    </div>
  </form>
</div>

.wrap {
  width: 200px;
  margin: 0 auto;
}

form {
  padding: 10px 0;
  input {
    margin-bottom: 10px;
    width: 190px;
    height: 20px;
    outline: none;
  }
  .btnGroup {
    display: flex;
    justify-content: space-between;
    button {
      padding: 10px 20px;
      border: none;
      border-radius: 10px;
      background-color: green;
      color: #fff;
      outline: none;
      &:hover {
        background: darken(green, 10%);
        transition: all 0.5s;
      }
    }
    .btnSubmit {
      &:hover {
        background: orange;
      }
      &:disabled {
        background-color: gray;
      }
    }
    .btnNew {
      &:disabled {
        background-color: gray;
      }
    }
  }
}

$(function () {
  $("form input").attr("disabled", true);
  $(".btnSubmit").attr("disabled", true);

  $(".btnNew").click(function () {
    $("input").attr("disabled", false);
    $(".btnSubmit").attr("disabled", false);
    $(".btnNew").attr("disabled", true);
  });

  $(".btnSubmit").click(function () {
    $("input").val("");
    $(".btnSubmit").attr("disabled", true);
    $(".btnNew").attr("disabled", false);
    $("input").attr("disabled", true);
  });
});