Why use HTTPS Everywhere when we have HSTS supported browsers?

HSTS uses a Trust on First Use model. If your first connection to the site was already compromised, you may not receive an HSTS error on subsequent requests.

The HTTPS Everywhere plugs this hole, by letting your browser know that the site is an HTTPS only site from the first connection.

Also, some websites don't advertise an HSTS header even when they support HTTPS. Or they may have their HTTPS be in a different domain/path (e.g. http://www.example.com but https://secure.example.com), HTTPS Everywhere attempts to help with these situations by rewriting the site's URLs.

HTTPS Everywhere is client-side, and HSTS is server-side.

So the answer is that HTTPS Everywhere is to defend in cases where the server does not set an HSTS header.

even then if we browse to a website say www.facebook.com, the response header from the Facebook servers would have HSTS mentioned

I made a curl request to http://www.facebook.com and this is what I got:

< HTTP/1.1 302 Found
< Location: https://www.facebook.com/
< Content-Type: text/html
< X-FB-Debug: zgK/A+8XSlghi/vWvAivsZ04gawpdr+3BuO7yuQaKDdrP/+B14oSVDSreHh0GbchyNPnav39pQq9Zgw5mSXX5A==
< Date: Sat, 29 Apr 2017 19:23:25 GMT
< Connection: keep-alive
< Content-Length: 0

As you can see there is no HSTS header here, because according to its specification (RFC6797):

An HSTS Host MUST NOT include the STS header field in HTTP responses conveyed over non-secure transport.

Web browsers also ignore HSTS headers in HTTP responses:

Note: The Strict-Transport-Security header is ignored by the browser when your site is accessed using HTTP; this is because an attacker may intercept HTTP connections and inject the header or remove it. When your site is accessed over HTTPS with no certificate errors, the browser knows your site is HTTPS capable and will honor the Strict-Transport-Security header.

The purpose of HSTS is to tell the client NOT to switch to HTTP once it has accessed a website over HTTPS, and not the other way round. From Wikipedia:

HTTP Strict Transport Security (HSTS) is a web security policy mechanism which helps to protect websites against protocol downgrade attacks and cookie hijacking.

Protocol downgrade attack:

A downgrade attack is a form of attack on a computer system or communications protocol that makes it abandon a high-quality mode of operation (e.g. an encrypted connection) in favor of an old, lower-quality mode of operation (e.g. clear text) that is there for backward compatibility with older systems.

So a HSTS header isn't used to redirect a new HTTP connection to HTTPS, but rather to prevent a browser from making HTTP requests to an existing HTTPS site.

The HTTPS Everywhere plugin on the other hand ensures the web browser makes HTTPS connections to websites that support HTTPS, but are also accessible over HTTP.

Many sites on the web offer some limited support for encryption over HTTPS, but make it difficult to use. For instance, they may default to unencrypted HTTP, or fill encrypted pages with links that go back to the unencrypted site. The HTTPS Everywhere extension fixes these problems by using clever technology to rewrite requests to these sites to HTTPS.