resolve ids conflict

src/components/Footer/Footer.js

@@ -121,7 +121,7 @@ export default function Footer() {
           <div className="footer-column">
             <Fade duration={700} distance="40px" bottom>
               <h2>Stay up to date with Skynet updates</h2>
-              <Mailing id="check2" light />
+              <Mailing id="mailing-bottom" light />
             </Fade>
           </div>
         </div>

src/components/HomeStay/HomeStay.js

@@ -34,7 +34,7 @@ export default class HomeStay extends Component {
               </Fade>
             </header>
             <Fade duration={700} distance="40px" bottom>
-              <Mailing id="check1" />
+              <Mailing id="mailing-top" />
             </Fade>
           </div>
 

src/components/Mailing/Mailing.js

@@ -9,6 +9,9 @@ const url = "https://tech.us11.list-manage.com/subscribe/post?u=5df238d9e852f980
 const CustomForm = ({ status, message, onValidated, light, id }) => {
   let email, user;
 
+  const checkboxId = `${id}-check`;
+  const submitId = `${id}-submit`;
+
   const submit = () => {
     if ((email, user, email.value.indexOf("@") > -1)) {
       onValidated({
@@ -25,13 +28,13 @@ const CustomForm = ({ status, message, onValidated, light, id }) => {
         type="email"
         placeholder="Email Address"
         validate="true"
-        aria-labelledby="newsletter-subscribe"
+        aria-labelledby={submitId}
       />
       <div className="home-form-stay-existing">
-        <input ref={node => (user = node)} type="checkbox" id={id} />
-        <label htmlFor={id}>I have previous experience using Sia</label>
+        <input ref={node => (user = node)} type="checkbox" id={checkboxId} />
+        <label htmlFor={checkboxId}>I have previous experience using Sia</label>
       </div>
-      <button className="button" onClick={submit} id="newsletter-subscribe">
+      <button className="button" onClick={submit} id={submitId}>
         Get Updates
       </button>