Adding Gridster widgets with different color

I have JavaScript code that uses Gridster to load widgets. Every time I add a widget with the "add" button, it loads in default color as defined in CSS (blue).

I want to load widgets with different colors. I want to give user a choice of color (a dropdown) and, depending upon the color chosen, the widget should load.

How can I do this in JavaScript?

var gridster;

gridster = $(".gridster ul").gridster({
  widget_base_dimensions: [100, 100],
  widget_margins: [5, 5],
  helper: 'clone',
  resize: {
    enabled: true
  }
}).data('gridster');

$(document).on("click", ".delete-button", function() {
  var gridster = $(".gridster ul").gridster().data('gridster');
  gridster.remove_widget($(this).parent());
});

$(document).on("click", ".add-button", function() {
  var gridster = $(".gridster ul").gridster().data('gridster');
  gridster.add_widget('<li><button class="delete-button" style="float: right;">-</button><h3></h3></li>', 1, 1);
});

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.min.js"></script>
<link href="//dsmorse.github.io/gridster.js/demos/assets/css/demo.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.css" rel="stylesheet" />

<div class="gridster">
  <ul>
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>1</h3>
    </li>
    <li data-row="1" data-col="2" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>2</h3>
    </li>
    <li data-row="1" data-col="3" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>3</h3>
    </li>
    <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>4</h3>
    </li>
    <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>5</h3>
    </li>
    <li data-row="2" data-col="2" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>6</h3>
    </li>
    <li data-row="2" data-col="3" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>7</h3>
    </li>
    <li data-row="2" data-col="4" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>8</h3>
    </li>
    <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>9</h3>
    </li>
    <li data-row="3" data-col="2" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>10</h3>
    </li>
    <li data-row="3" data-col="3" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>11</h3>
    </li>
    <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>12</h3>
    </li>



</div>


<button class="add-button" style="float:top;">Add Widget</button>

View on JSFiddle

Solution

One method is to fetch the selected value from a <select> list upon adding a widget. Build a class name to reference a CSS style for the selected color and apply that class to the widget being added.

var gridster;
var $color_picker = $('#color_picker');

gridster = $(".gridster ul").gridster({
  widget_base_dimensions: [50, 50],
  widget_margins: [5, 5],
  helper: 'clone',
  resize: {
    enabled: true
  }
}).data('gridster');

$('.gridster').on("click", ".delete-button", function() {
  gridster.remove_widget($(this).parent());
});

$(".add-button").on("click", function() {

  // get selected color value
  var color = $color_picker.val();

  // build the widget, including a class for the selected color value
  var $widget = $('<li>', {
      'class': 'color_' + color
    })
    .append($('<button>', {
      'class': 'delete-button',
      'text':'-'
    }))
    .append($('<h3>', {
      'text': '#'
    }));

  // add widget to the grid
  gridster.add_widget($widget, 1, 1);

});

.gridster {
  margin: 0 0 3em;
}

.delete-button {
  float: right;
}

.gridster .gs-w.color_lightblue {
  background-color: lightblue;
}
.gridster .gs-w.color_lightgreen {
  background-color: lightgreen;
}
.gridster .gs-w.color_salmon {
  background-color: salmon;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.min.js"></script>
<link href="//dsmorse.github.io/gridster.js/demos/assets/css/demo.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.css" rel="stylesheet" />

<div class="gridster">
  <ul>
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"><button class="delete-button">-</button>
      <h3>1</h3>
    </li>
    <li data-row="1" data-col="2" data-sizex="1" data-sizey="1"><button class="delete-button">-</button>
      <h3>2</h3>
    </li>
    <li data-row="1" data-col="3" data-sizex="1" data-sizey="1"><button class="delete-button">-</button>
      <h3>3</h3>
    </li>
  </ul>
</div>

<select id="color_picker">
  <option value="lightgreen">Light Green</option>
  <option value="lightblue">Light Blue</option>
  <option value="salmon">Salmon</option>
</select>

<button class="add-button">Add Widget</button>