diff --git a/custom.css b/custom.css
new file mode 100644
index 00000000..99ed569d
--- /dev/null
+++ b/custom.css
@@ -0,0 +1,27 @@
+.bg-info {
+  background-color: #91cdd6 !important;
+}
+
+.bg-success {
+  background-color: #91d8a1 !important;
+}
+
+.bg-secondary {
+  background-color: #adb5bd !important;
+}
+
+.bg-dark {
+  background-color: #646b72 !important;
+}
+
+.dropdown-item {
+  cursor: pointer;
+}
+textarea.invalid {
+  border-color: red !important;
+}
+.scrollable-menu {
+  height: auto;
+  max-height: 300px;
+  overflow-x: hidden;
+}
diff --git a/index.html b/index.html
index 9e070992..c9582557 100644
--- a/index.html
+++ b/index.html
@@ -5,19 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <title>Loot Table Generator</title>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
-  <style media="screen">
-    .dropdown-item {
-      cursor: pointer;
-    }
-    textarea.invalid {
-      border-color: red !important;
-    }
-    .scrollable-menu {
-      height: auto;
-      max-height: 300px;
-      overflow-x: hidden;
-    }
-  </style>
+  <link rel="stylesheet" href="custom.css">
 </head>
 <body>
   <nav class="navbar navbar-dark bg-dark">
@@ -45,7 +33,7 @@
             <label class="custom-control-label" for="luckBased">Luck-based</label>
           </div>
         </div>
-        <div id="structure"">
+        <div id="structure" class="table">
         </div>
       </div>
       <div class="col-12 col-lg-5">
@@ -68,17 +56,17 @@
   </div>
 
   <div class="d-none">
-    <div id="poolTemplate" class="card mt-3 pool">
+    <div id="poolTemplate" class="card bg-success text-white mt-3 pool">
       <div class="card-header pb-1">
         <button type="button" class="btn btn-danger mb-2 float-right" onclick="removePool(this)">Remove Pool</button>
-        <button type="button" class="btn btn-outline-success mr-3 mb-2 float-left" onclick="addEntry(this)">Add Entry</button>
-        <button type="button" class="btn btn-outline-success mr-3 mb-2 float-left">Add Condition</button>
+        <button type="button" class="btn btn-light mr-3 mb-2 float-left" onclick="addEntry(this)">Add Entry</button>
+        <button type="button" class="btn btn-info mr-3 mb-2 float-left" onclick="addCondition(this)">Add Condition</button>
       </div>
       <div class="card-body">
         <div class="input-group rolls" data-type="exact">
           <div class="input-group-prepend">
             <span class="input-group-text">Rolls</span>
-            <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
+            <button type="button" class="btn btn-outline-secondary bg-light dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
             <div class="dropdown-menu">
               <a class="dropdown-item" onclick="switchRollsType(this, 'exact')">Exact</a>
               <a class="dropdown-item" onclick="switchRollsType(this, 'range')">Range</a>
@@ -98,7 +86,7 @@
         <div class="input-group mt-3 bonus-rolls" data-type="exact">
           <div class="input-group-prepend">
             <span class="input-group-text">Bonus Rolls</span>
-            <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
+            <button type="button" class="btn btn-outline-secondary bg-light dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
             <div class="dropdown-menu">
               <a class="dropdown-item" onclick="switchBonusRollsType(this, 'exact')">Exact</a>
               <a class="dropdown-item" onclick="switchBonusRollsType(this, 'range')">Range</a>
@@ -120,8 +108,8 @@
     <div id="entryTemplate" class="card mt-3 entry">
       <div class="card-header pb-1">
         <button type="button" class="btn btn-danger mb-2 float-right" onclick="removeEntry(this)">Remove Entry</button>
-        <button type="button" class="btn btn-outline-success mr-3 mb-2 float-left">Add Condition</button>
-        <button type="button" class="btn btn-outline-success mr-3 mb-2 float-left" onclick="addFunction(this)">Add Function</button>
+        <button type="button" class="btn btn-secondary mr-3 mb-2 float-left" onclick="addFunction(this)">Add Function</button>
+        <button type="button" class="btn btn-info mr-3 mb-2 float-left" onclick="addCondition(this)">Add Condition</button>``
       </div>
       <div class="card-body">
         <div class="input-group entry-type">
@@ -158,14 +146,14 @@
           <input type="text" class="form-control" onchange="updateEntryQuality(this)" onclick="this.select()">
         </div>
         <div class="input-group mt-3 entry-children d-none">
-          <button type="button" class="btn btn-outline-success">Add Child</button>
+          <button type="button" class="btn btn-outline-success" onclick="addChild(this)">Add Child</button>
         </div>
       </div>
     </div>
-    <div id="functionTemplate" class="card mt-3 function">
+    <div id="functionTemplate" class="card bg-secondary mt-3 function">
       <div class="card-header pb-1">
         <button type="button" class="btn btn-danger mb-2 float-right" onclick="removeFunction(this)">Remove Function</button>
-        <button type="button" class="btn btn-outline-success mr-3 mb-2 float-left">Add Condition</button>
+        <button type="button" class="btn btn-info mr-3 mb-2 float-left" onclick="addCondition(this)">Add Condition</button>
       </div>
       <div class="card-body">
         <div class="input-group">
@@ -186,7 +174,7 @@
         <div class="input-group function-count mt-3 d-none" data-type="exact">
           <div class="input-group-prepend">
             <span class="input-group-text">Count</span>
-            <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
+            <button type="button" class="btn btn-outline-secondary bg-light dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
             <div class="dropdown-menu">
               <a class="dropdown-item" onclick="switchCountType(this, 'exact')">Exact</a>
               <a class="dropdown-item" onclick="switchCountType(this, 'range')">Range</a>
@@ -206,7 +194,7 @@
         <div class="input-group function-damage mt-3 d-none" data-type="exact">
           <div class="input-group-prepend">
             <span class="input-group-text">Damage</span>
-            <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
+            <button type="button" class="btn btn-outline-secondary bg-light dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
             <div class="dropdown-menu">
               <a class="dropdown-item" onclick="switchDamageType(this, 'exact')">Exact</a>
               <a class="dropdown-item" onclick="switchDamageType(this, 'range')">Range</a>
@@ -235,7 +223,7 @@
               <span class="input-group-text">Optional Enchantments</span>
             </div>
             <div class="input-group-append">
-              <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split rounded-right" data-toggle="dropdown"></button>
+              <button type="button" class="btn btn-outline-secondary bg-light dropdown-toggle dropdown-toggle-split rounded-right" data-toggle="dropdown"></button>
               <div class="dropdown-menu scrollable-menu">
                 <a class="dropdown-item" data-ench="minecraft:aqua_affinity" onclick="addEnchantment(this)">Aqua Affinity</a>
                 <a class="dropdown-item" data-ench="minecraft:bane_of_arthropods" onclick="addEnchantment(this)">Bane of Arthropods</a>
@@ -283,7 +271,7 @@
         <div class="input-group function-ench-levels mt-3 d-none" data-type="exact">
           <div class="input-group-prepend">
             <span class="input-group-text">Levels</span>
-            <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
+            <button type="button" class="btn btn-outline-secondary bg-light dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
             <div class="dropdown-menu">
               <a class="dropdown-item" onclick="switchLevelsType(this, 'exact')">Exact</a>
               <a class="dropdown-item" onclick="switchLevelsType(this, 'range')">Range</a>
@@ -313,11 +301,11 @@
           <input type="text" class="form-control" onchange="updateLimitField(this)" onclick="this.select()">
         </div>
         <div class="input-group mt-3 function-attributes d-none">
-          <button type="button" class="btn btn-outline-success" onclick="addModifier(this)">Add Modifier</button>
+          <button type="button" class="btn btn-dark" onclick="addModifier(this)">Add Modifier</button>
         </div>
       </div>
     </div>
-    <div id="modifierTemplate" class="card mt-3 modifier">
+    <div id="modifierTemplate" class="card bg-dark mt-3 modifier">
       <div class="card-header pb-1">
         <button type="button" class="btn btn-danger mb-2 float-right" onclick="removeModifier(this)">Remove Modifier</button>
       </div>
@@ -351,7 +339,7 @@
         <div class="input-group mt-3 modifier-amount" data-type="exact">
           <div class="input-group-prepend">
             <span class="input-group-text">Amount</span>
-            <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
+            <button type="button" class="btn btn-outline-secondary bg-light dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
             <div class="dropdown-menu">
               <a class="dropdown-item" onclick="switchModifierAmountType(this, 'exact')">Exact</a>
               <a class="dropdown-item" onclick="switchModifierAmountType(this, 'range')">Range</a>
@@ -384,7 +372,7 @@
               <span class="input-group-text">Slots</span>
             </div>
             <div class="input-group-append">
-              <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split rounded-right" data-toggle="dropdown"></button>
+              <button type="button" class="btn btn-outline-secondary bg-light dropdown-toggle dropdown-toggle-split rounded-right" data-toggle="dropdown"></button>
               <div class="dropdown-menu">
                 <a class="dropdown-item" data-slot="mainhand" onclick="addModifierSlot(this)">Mainhand</a>
                 <a class="dropdown-item" data-slot="offhand" onclick="addModifierSlot(this)">Offhand</a>
@@ -400,6 +388,13 @@
         </div>
       </div>
     </div>
+    <div id="conditionTemplate" class="card mt-3 bg-info condition">
+      <div class="card-header pb-1">
+        <button type="button" class="btn btn-danger mb-2 float-right" onclick="removeCondition(this)">Remove Condition</button>
+      </div>
+      <div class="card-body">
+      </div>
+    </div>
   </div>
 
   <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
diff --git a/script.js b/script.js
index df59c738..ffc06222 100644
--- a/script.js
+++ b/script.js
@@ -10,26 +10,38 @@ let table = {
   pools: []
 };
 addPool();
-addEntry($('.pool').get());
+addEntry($('#structure .pool').get());
 
-function getPool(el) {
-  let index = parseInt($(el).closest('.pool').attr('data-index'));
-  return table.pools[index];
+function getParent(el) {
+  let $parent = $(el).closest('.table, .pool, .entry, .child, .term, .function, .condition, .modifier');
+  let index = $parent.attr('data-index');
+  if ($parent.hasClass('table')) {
+    return table;
+  } else if ($parent.hasClass('pool')) {
+    return getParent($parent.parent()).pools[index];
+  } else if ($parent.hasClass('entry')) {
+    return getParent($parent.parent()).entries[index];
+  } else if ($parent.hasClass('child')) {
+    return getParent($parent.parent()).children[index];
+  } else if ($parent.hasClass('term')) {
+    return getParent($parent.parent()).term;
+  } else if ($parent.hasClass('function')) {
+    return getParent($parent.parent()).functions[index];
+  } else if ($parent.hasClass('condition')) {
+    return getParent($parent.parent()).conditions[index];
+  } else if ($parent.hasClass('modifier')) {
+    return getParent($parent.parent()).modifiers[index];
+  }
 }
 
-function getEntry(el) {
-  let index = parseInt($(el).closest('.entry').attr('data-index'));
-  return getPool(el).entries[index];
+function getSuperParent(el) {
+  let $parent = $(el).closest('.table, .pool, .entry, .child, .term, .function, .condition, .modifier');
+  return getParent($parent.parent());
 }
 
-function getFunction(el) {
-  let index = parseInt($(el).closest('.function').attr('data-index'));
-  return getEntry(el).functions[index];
-}
-
-function getModifier(el) {
-  let index = parseInt($(el).closest('.modifier').attr('data-index'));
-  return getFunction(el).modifiers[index];
+function getIndex(el) {
+  let $parent = $(el).closest('.table, .pool, .entry, .child, .term, .function, .condition, .modifier');
+  return parseInt($parent.attr('data-index'));
 }
 
 function addPool(el) {
@@ -41,13 +53,13 @@ function addPool(el) {
 }
 
 function removePool(el) {
-  let index = parseInt($(el).closest('.pool').attr('data-index'));
-  table.pools.splice(index, 1);
+  let index = getIndex(el);
+  getSuperParent(el).pools.splice(index, 1);
   invalidated();
 }
 
 function addEntry(el) {
-  getPool(el).entries.push({
+  getParent(el).entries.push({
     type: "minecraft:item",
     name: "minecraft:stone"
   });
@@ -55,13 +67,27 @@ function addEntry(el) {
 }
 
 function removeEntry(el) {
-  let index = parseInt($(el).closest('.entry').attr('data-index'));
-  getPool(el).entries.splice(index, 1);
+  let index = getIndex(el);
+  getSuperParent(el).entries.splice(index, 1);
+  invalidated();
+}
+
+function addChild(el) {
+  getParent(el).children.push({
+    type: "minecraft:item",
+    name: "minecraft:stone"
+  });
+  invalidated();
+}
+
+function removeChild(el) {
+  let index = getIndex(el);
+  getSuperParent(el).children.splice(index, 1);
   invalidated();
 }
 
 function addFunction(el) {
-  let entry = getEntry(el);
+  let entry = getParent(el);
   if (!entry.functions) {
     entry.functions = [];
   }
@@ -72,8 +98,32 @@ function addFunction(el) {
 }
 
 function removeFunction(el) {
-  let index = parseInt($(el).closest('.function').attr('data-index'));
-  getEntry(el).functions.splice(index, 1);
+  let parent = getSuperParent(el);
+  parent.functions.splice(getIndex(el), 1);
+  if (parent.functions.length === 0) {
+    delete parent.functions;
+  }
+  invalidated();
+}
+
+function addCondition(el) {
+  let parent = getParent(el);
+  if (!parent.conditions) {
+    parent.conditions = [];
+  }
+  parent.conditions.push({
+    condition: "minecraft:random_chance",
+    change: 0.5
+  });
+  invalidated();
+}
+
+function removeCondition(el) {
+  let parent = getSuperParent(el);
+  parent.conditions.splice(getIndex(el), 1);
+  if (parent.conditions.length === 0) {
+    delete parent.conditions;
+  }
   invalidated();
 }
 
@@ -105,7 +155,7 @@ function switchRollsType(el, type) {
 function updateRollsField(el) {
   let type = $(el).closest('.rolls').attr('data-type');
   let data = getRangeField($(el).closest('.rolls'), type);
-  getPool(el).rolls = data;
+  getParent(el).rolls = data;
   invalidated();
 }
 
@@ -118,15 +168,15 @@ function updateBonusRollsField(el) {
   let type = $(el).closest('.bonus-rolls').attr('data-type');
   let data = getRangeField($(el).closest('.bonus-rolls'), type);
   if (type ==='exact' && isNaN(data)) {
-    delete getPool(el).bonus_rolls;
+    delete getParent(el).bonus_rolls;
   } else {
-    getPool(el).bonus_rolls = data;
+    getParent(el).bonus_rolls = data;
   }
   invalidated();
 }
 
 function updateEntryType(el) {
-  let entry = getEntry(el);
+  let entry = getParent(el);
   entry.type = $(el).val();
   if (entry.type === 'minecraft:dynamic') {
     entry.name = 'minecraft:contents';
@@ -135,7 +185,7 @@ function updateEntryType(el) {
 }
 
 function updateEntryName(el) {
-  let entry = getEntry(el);
+  let entry = getParent(el);
   if (entry.type === 'minecraft:dynamic') {
     entry.name = 'minecraft:contents';
   } else {
@@ -147,9 +197,9 @@ function updateEntryName(el) {
 function updateEntryWeight(el) {
   let weight = parseInt($(el).val());
   if (isNaN(weight)) {
-    delete getEntry(el).weight;
+    delete getParent(el).weight;
   } else {
-    getEntry(el).weight = weight;
+    getParent(el).weight = weight;
   }
   invalidated();
 }
@@ -157,15 +207,15 @@ function updateEntryWeight(el) {
 function updateEntryQuality(el) {
   let quality = parseInt($(el).val());
   if (isNaN(quality)) {
-    delete getEntry(el).quality;
+    delete getParent(el).quality;
   } else {
-    getEntry(el).quality = quality;
+    getParent(el).quality = quality;
   }
   invalidated();
 }
 
 function updateFunctionType(el) {
-  getFunction(el).function = $(el).val();
+  getParent(el).function = $(el).val();
   invalidated();
 }
 
@@ -177,7 +227,7 @@ function switchCountType(el, type) {
 function updateCountField(el) {
   let type = $(el).closest('.function-count').attr('data-type');
   let data = getRangeField($(el).closest('.function-count'), type);
-  getFunction(el).count = data;
+  getParent(el).count = data;
   invalidated();
 }
 
@@ -189,7 +239,7 @@ function switchDamageType(el, type) {
 function updateDamageField(el) {
   let type = $(el).closest('.function-damage').attr('data-type');
   let data = getRangeField($(el).closest('.function-damage'), type);
-  getFunction(el).damage = data;
+  getParent(el).damage = data;
   invalidated();
 }
 
@@ -201,12 +251,12 @@ function updateTagField(el) {
   if (!nbt.endsWith('}')) {
     nbt = nbt + '}';
   }
-  getFunction(el).tag = nbt;
+  getParent(el).tag = nbt;
   invalidated();
 }
 
 function addEnchantment(el) {
-  let func = getFunction(el);
+  let func = getParent(el);
   let enchantment = $(el).attr('data-ench');
   if (!func.enchantments) {
     func.enchantments = [];
@@ -216,7 +266,7 @@ function addEnchantment(el) {
 }
 
 function removeEnchantment(el) {
-  let func = getFunction(el);
+  let func = getParent(el);
   let ench = $(el).attr('data-ench');
   let index = func.enchantments.indexOf(ench);
   if (index > -1) {
@@ -236,17 +286,16 @@ function switchLevelsType(el, type) {
 function updateLevelsField(el) {
   let type = $(el).closest('.function-ench-levels').attr('data-type');
   let data = getRangeField($(el).closest('.function-ench-levels'), type);
-  getFunction(el).levels = data;
+  getParent(el).levels = data;
   invalidated();
 }
 
 function updateTreasureField(el) {
   let treasure = $(el).prop('checked');
-  console.log(treasure);
   if (treasure) {
-    getFunction(el).treasure = true;
+    getParent(el).treasure = true;
   } else {
-    delete getFunction(el).treasure;
+    delete getParent(el).treasure;
   }
   invalidated();
 }
@@ -254,15 +303,15 @@ function updateTreasureField(el) {
 function updateLimitField(el) {
   let limit = parseInt($(el).val());
   if (isNaN(limit)) {
-    delete getFunction(el).limit;
+    delete getParent(el).limit;
   } else {
-    getFunction(el).limit = limit;
+    getParent(el).limit = limit;
   }
   invalidated();
 }
 
 function addModifier(el) {
-  let func = getFunction(el);
+  let func = getParent(el);
   if (!func.modifiers) {
     func.modifiers = [];
   }
@@ -278,17 +327,17 @@ function addModifier(el) {
 
 function removeModifier(el) {
   let index = parseInt($(el).closest('.modifier').attr('data-index'));
-  getFunction(el).modifiers.splice(index, 1);
+  getParent(el).modifiers.splice(index, 1);
   invalidated();
 }
 
 function updateModifierAttribute(el) {
-  getModifier(el).attribute = $(el).val();
+  getParent(el).attribute = $(el).val();
   invalidated();
 }
 
 function updateModifierName(el) {
-  getModifier(el).name = $(el).val();
+  getParent(el).name = $(el).val();
   invalidated();
 }
 
@@ -300,17 +349,17 @@ function switchModifierAmountType(el, type) {
 function updateModifierAmountField(el) {
   let type = $(el).closest('.modifier-amount').attr('data-type');
   let data = getRangeField($(el).closest('.modifier-amount'), type);
-  getModifier(el).amount = data;
+  getParent(el).amount = data;
   invalidated();
 }
 
 function updateModifierOperation(el) {
-  getModifier(el).operation = $(el).val();
+  getParent(el).operation = $(el).val();
   invalidated();
 }
 
 function addModifierSlot(el) {
-  let modifier = getModifier(el);
+  let modifier = getParent(el);
   if (!modifier.slots) {
     modifier.slots = [];
   }
@@ -319,7 +368,7 @@ function addModifierSlot(el) {
 }
 
 function removeModifierSlot(el) {
-  let modifier = getModifier(el);
+  let modifier = getParent(el);
   let slot = $(el).attr('data-slot');
   let index = modifier.slots.indexOf(slot);
   if (index > -1) {
@@ -425,12 +474,18 @@ function generatePool(pool, i) {
     $pool.find('.bonus-rolls').addClass('d-none');
   }
 
-  // Entries
   for (let j = 0; j < pool.entries.length; j += 1) {
     let $entry = generateEntry(pool.entries[j], j);
     $pool.children('.card-body').append($entry);
   }
 
+  if (pool.conditions) {
+    for (let j = 0; j < pool.conditions.length; j += 1) {
+      let $condition = generateCondition(pool.conditions[j], j);
+      $pool.children('.card-body').append($condition);
+    }
+  }
+
   return $pool;
 }
 
@@ -464,6 +519,14 @@ function generateEntry(entry, i) {
     $entry.find('.entry-children').removeClass('d-none');
   }
 
+  if (entry.children) {
+    for (let j = 0; j < entry.children.length; j += 1) {
+      let $child = generateEntry(entry.children[j], j);
+      $child.removeClass('entry').addClass('child');
+      $entry.children('.card-body').append($child);
+    }
+  }
+
   if (entry.functions) {
     for (let j = 0; j < entry.functions.length; j += 1) {
       let $function = generateFunction(entry.functions[j], j);
@@ -471,6 +534,13 @@ function generateEntry(entry, i) {
     }
   }
 
+  if (entry.conditions) {
+    for (let j = 0; j < entry.conditions.length; j += 1) {
+      let $condition = generateCondition(entry.conditions[j], j);
+      $entry.children('.card-body').append($condition);
+    }
+  }
+
   return $entry;
 }
 
@@ -503,7 +573,7 @@ function generateFunction(func, i) {
       for (let e of func.enchantments) {
         let item = $function.find('.dropdown-item[data-ench="' + e + '"]');
         item.addClass('d-none');
-        let html = '<button type="button" class="btn btn-outline-danger btn-sm mr-2 mt-2" data-ench="' + e + '" onclick="removeEnchantment(this)">' + item.text() + '</button>';
+        let html = '<button type="button" class="btn btn-outline-danger bg-light btn-sm mr-2 mt-2" data-ench="' + e + '" onclick="removeEnchantment(this)">' + item.text() + '</button>';
         $function.find('.enchantment-list').append(html);
       }
     }
@@ -543,6 +613,13 @@ function generateFunction(func, i) {
     delete func.modifiers;
   }
 
+  if (func.conditions) {
+    for (let j = 0; j < func.conditions.length; j += 1) {
+      let $condition = generateCondition(func.conditions[j], j);
+      $function.children('.card-body').append($condition);
+    }
+  }
+
   return $function;
 }
 
@@ -557,13 +634,19 @@ function generateModifier(modifier, i) {
 
   if (modifier.slots) {
     for (let s of modifier.slots) {
-      console.log(s);
       let item = $modifier.find('.dropdown-item[data-slot="' + s + '"]');
       item.addClass('d-none');
-      let html = '<button type="button" class="btn btn-outline-danger btn-sm mr-2 mt-2" data-slot="' + s + '" onclick="removeModifierSlot(this)">' + item.text() + '</button>';
+      let html = '<button type="button" class="btn btn-outline-danger bg-light btn-sm mr-2 mt-2" data-slot="' + s + '" onclick="removeModifierSlot(this)">' + item.text() + '</button>';
       $modifier.find('.modifier-slots-list').append(html);
     }
   }
 
   return $modifier
 }
+
+function generateCondition(condition, i) {
+  let $condition = $('#conditionTemplate').clone();
+  $condition.removeAttr('id').attr('data-index', i);
+
+  return $condition;
+}
