Q:

why does it not 'add to cart' when I click add to cart?

When I try clicking on the add to cart button, it won't add to my cart. I don't know how to fix this. Is the code missing something important? I want it so that when I click on "add to cart" a product will be added so that it will appear in the shopping cart as an item added.
This is a class project I'm working on with a 
    <!DOCTYPE html>

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta charset="utf-8">
      <title>Printing Prime</title>
      <link rel="icon" type="image/png" href="img/favi.png">
      <script src="js//bootstrap.min.js"></script>
      <script src="js/script.js"></script>
      <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
      <link href="https://fonts.googleapis.com/css?family=Noto+Sans&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
      <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css'>
      <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css'>
      <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto+Condensed:100'>
      <link rel="stylesheet" type="text/css" href="css/home.css">
      <link rel="stylesheet" href="css/splitslick/style.css">
      <link rel="stylesheet" href="css/featprod/style.css"
    </head>

    <body>

        <section id="" class="container-fluid cart">
            <article id="" class="col">
                <span class="open-modal">
                    <i id="carts" class="fa fa-shopping-cart" data-toggle="modal" data-target="#cart"></i>
                </span>
            </article>
        </section>

    <section id="" class="container-fluid">
        <article id="" class="row">
             <div id="mask"></div>
                <div class="modal fade" id="cart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
              <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Cart</h5>
                  </div>
                  <div class="modal-body">
                    <table class="show-cart table">

                    </table>
                    <div>Total price: $<span class="total-cart"></span></div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Order now</button>
                  </div>
                </div>
              </div>
            </div>
        </article>
    </section>

    <section id="products" class="container-fluid">
      <article id="" class="row">
        <div id="" class="col col-md-12 product-grid">
          <div class="col col-md-4 grid-item">
            <div>
              <div>
                <div>
                  <img style="height: 30vh; width: 15vw;" src="img/hat1.png" alt="Avatar">
                  <h5 style="color:white;">Sad Face Cap</h5>
                    <h5 style="color:white;">$12.99</h5>
                  <div>
                    <input type="number" placeholder="# of items">
                    <a href="#" data-name="Sad Face Cap" data-price="12.99" class="add-to-cart btn btn-primary">Add to cart</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col col-md-4 grid-item">
            <div>
              <div>
                <div>
                  <img style="height: 30vh; width: 15vw;" src="img/shirt1.png" alt="Avatar">
                  <h5 style="color:white;">Signature Tee</h5>
                  <div>
                    <input type="number" placeholder="# of items">
                    <a href="#" data-name="Signature Tee" data-price="14.99" id="submit" class="add-to-cart btn btn-primary">Add to cart</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class=" col col-md-4 grid-item">
            <div>
              <div>
                <div>
                  <img style="height: 30vh; width: 14vw;" src="img/hoodie1.png" alt="Avatar" >
                  <h5 style="color:white;">VHS Hoodie</h5>
                  <div>
                    <input type="number" placeholder="# of items" >
                    <a href="#" data-name="VHS Hoodie" data-price="16.99" id="submit" class="add-to-cart btn btn-primary">Add to cart</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

      </body>
      </html>

    (js)

    function openModalBox(){
      var modal = $('.modal, #mask');
    $('.open-modal').on('click', function() {
     modal.fadeIn(300);
    });
    $('.close-modal, #mask').on('click', function() {
     modal.fadeOut(800);
    });
    }
    openModalBox();

    var shoppingCart = (function() {

      cart = [];

      function Item(name, price, count) {
        this.name = name;
        this.price = price;
        this.count = count;
      }

      function saveCart() {
        sessionStorage.setItem('shoppingCart', JSON.stringify(cart));
      }

      function loadCart() {
        cart = JSON.parse(sessionStorage.getItem('shoppingCart'));
      }
      if (sessionStorage.getItem("shoppingCart") != null) {
        loadCart();
      }

      var obj = {};

      obj.addItemToCart = function(name, price, count) {
        for(var item in cart) {
          if(cart[item].name === name) {
            cart[item].count ++;
            saveCart();
            return;
          }
        }
        var item = new Item(name, price, count);
        cart.push(item);
        saveCart();
      }

      obj.setCountForItem = function(name, count) {
        for(var i in cart) {
          if (cart[i].name === name) {
            cart[i].count = count;
            break;
          }
        }
      };

      obj.removeItemFromCart = function(name) {
          for(var item in cart) {
            if(cart[item].name === name) {
              cart[item].count --;
              if(cart[item].count === 0) {
                cart.splice(item, 1);
              }
              break;
            }
        }
        saveCart();
      }

      obj.removeItemFromCartAll = function(name) {
        for(var item in cart) {
          if(cart[item].name === name) {
            cart.splice(item, 1);
            break;
          }
        }
        saveCart();
      }

      obj.totalCount = function() {
        var totalCount = 0;
        for(var item in cart) {
          totalCount += cart[item].count;
        }
        return totalCount;
      }

      obj.totalCart = function() {
        var totalCart = 0;
        for(var item in cart) {
          totalCart += cart[item].price * cart[item].count;
        }
        return Number(totalCart.toFixed());
      }

      obj.listCart = function() {
        var cartCopy = [];
        for(i in cart) {
          item = cart[i];
          itemCopy = {};
          for(p in item) {
            itemCopy[p] = item[p];

          }
          itemCopy.total = Number(item.price * item.count).toFixed(2);
          cartCopy.push(itemCopy)
        }
        return cartCopy;
      }

      return obj;
    })();

    $('.add-to-cart').click(function(event) {
      event.preventDefault();
      var name = $(this).data('name');
      var price = Number($(this).data('price'));
      shoppingCart.addItemToCart(name, price, 1);
      displayCart();
    });

    $('.clear-cart').click(function() {
      shoppingCart.clearCart();
      displayCart();
    });

    function displayCart() {
      var cartArray = shoppingCart.listCart();
      var output = "";
      for(var i in cartArray) {
        output += "<tr>"
          + "<td>" + cartArray[i].name + "</td>" 
          + "<td>(" + cartArray[i].price + ")</td>"
          + "<td><div class='input-group'><button class='minus-item input-group-addon btn btn-primary' data-name=" + cartArray[i].name + ">-</button>"
          + "<input type='number' class='item-count form-control' data-name='" + cartArray[i].name + "' value='" + cartArray[i].count + "'>"
          + "<button class='plus-item btn btn-primary input-group-addon' data-name=" + cartArray[i].name + ">+</button></div></td>"
          + "<td><button class='delete-item btn btn-danger' data-name=" + cartArray[i].name + ">X</button></td>"
          + " = " 
          + "<td>" + cartArray[i].total + "</td>" 
          +  "</tr>";
      }
      $('.show-cart').html(output);
      $('.total-cart').html(shoppingCart.totalCart());
      $('.total-count').html(shoppingCart.totalCount());
    }

    $('.show-cart').on("click", ".delete-item", function(event) {
      var name = $(this).data('name')
      shoppingCart.removeItemFromCartAll(name);
      displayCart();
    })

    $('.show-cart').on("click", ".minus-item", function(event) {
      var name = $(this).data('name')
      shoppingCart.removeItemFromCart(name);
      displayCart();
    })

    $('.show-cart').on("click", ".plus-item", function(event) {
      var name = $(this).data('name')
      shoppingCart.addItemToCart(name);
      displayCart();
    })

    $('.show-cart').on("change", ".item-count", function(event) {
       var name = $(this).data('name');
       var count = Number($(this).val());
      shoppingCart.setCountForItem(name, count);
      displayCart();
    });

    displayCart();

A:

I see 2 issues from the code snippet you have given.
Issue 1 - You are loading script.js (I assume that is where you have your page level scripting code) before loading jquery.
Solution - Move the jquery reference to the above and move script.js reference below.

jQuery
Bootstrap
Your custom js file (script.js)

Issue 2 -  Wrap your script code inside document.ready function.
Solution -
$(document).ready(function() {
//Your script code
})

