Changing background-color permanently with .hover()?

Changing background-color permanently with .hover()?

I'm working on a mini-project that mimics Etch-a-sketch.  I want to change the background color of each dynamically created DIV when the mouse hovers over the element, the change must be permanent.  I've spent a couple hours trying to get the color to stick but can't get there on my own, any help will be greatly appreciated!

  2. $(document).ready(function () {
  3.     var grid = 0;

  5.     //Function to create a grid
  6.     function createGrid(g) {
  7.         for (var y = 1; y <= grid; y++) {
  8.             for (var x = 0; x <= grid; x++) {
  9.                 if (x != grid) {
  10.                     $('#grid').append('<div class="row"></div>');
  11.                 } else {
  12.                     $('#grid').append('<br><br>');
  13.                 }
  14.             }
  15.         }
  16.     }
  17.     
  18.     //Function to generate random colors
  19.     function getRandomColor() {
  20.     var letters = '0123456789ABCDEF'.split('');
  21.     var color = '#';
  22.     for (var i = 0; i < 6; i++ ) {
  23.         color += letters[Math.floor(Math.random() * 16)];
  24.     }
  25.     return color;
  26. }
  27.     
  28.     //Change color on hover
  29.     $('.row').hover(function(){
  30.         $(this).css('color', getRandomColor());
  31.     })

  33.     //Listen for click on submit
  34.     $('#submit').on('click', function (event) {
  35.         event.preventDefault();
  36.         grid = Number($('#input').val());
  37.         createGrid(grid);
  38.     })
  39. })