What percent-encoding is and why it exists
A URL can only safely contain a small set of ASCII characters. RFC 3986 defines unreserved characters - letters, digits, - . _ ~ - that never need encoding, and reserved characters - : / ? # [ ] @ ! $ & ' ( ) * + , ; = - that have a structural meaning (separating the scheme, path, query and fragment, or separating parameters). Everything else, including spaces, quotes, non-ASCII letters and emoji, must be written as one or more %XX sequences, where XX is the hexadecimal value of each UTF-8 byte. A space becomes %20, an ampersand %26, and the euro sign becomes three bytes: %E2%82%AC.
encodeURI vs encodeURIComponent
The two modes match the two JavaScript functions. encodeURIComponent encodes everything except letters, digits and - _ . ! ~ * ' ( ). Use it for a single value that you are about to drop into a query string, so that an & or = inside the value does not get mistaken for a separator: q=coffee & tea must be sent as q=coffee%20%26%20tea. encodeURI leaves the reserved characters ; , / ? : @ & = + $ # alone, so it can fix up a whole URL that contains spaces or non-ASCII characters without breaking its structure. It will not, however, encode an ampersand inside a value - if you need that, encode the value separately.
The sample input has a space in the path and a bare & and $ in a query value. encodeURI turns the space into %20 and leaves the rest, producing a URL browsers accept but with the ambiguous ampersand still in place. Switching to encodeURIComponent encodes the slashes and colons too, which is what you want only when the whole string is one parameter value.
Plus signs, decoding and query strings
HTML forms submitted with the default application/x-www-form-urlencoded encoding write spaces as + rather than %20, and a literal plus as %2B. Check "Use + for spaces" to encode that way, or to treat + as a space when decoding. Outside of form data, a + in a URL path is just a plus sign, which is why the option is off by default. The query-string parser always applies the form rule, since that is how every server framework reads ?a=1&b=2.
Decoding fails when a percent sign is not followed by two hex digits or the decoded bytes are not valid UTF-8; the tool reports that instead of guessing. Encoding is idempotent only in one direction: encoding an already-encoded string turns every % into %25, which is the classic double-encoding bug behind URLs that show %2520 in the address bar.