Float Buttons Dynamic List

I’ve been trying to figure out how to put a dynamic list (three input checkboxes) into a floating button like the below. My problem seems to be that the three choices are wrapped inside the open/close button so when you throw the code from the codenpen into the dynamic list it wants to have three instances of the button.

Does anyone know how I would achieve putting the codepen inside of a dynamic list?

<div class="bubble-btn">
  <input type="checkbox" id="your-id" class="bubble-btn-checkbox">
  <label class="bubble-btn-trigger" for="your-id"><i class="material-icons">add</i></label>
  <div class="bubble-btn-option"><i class="material-icons">favorite</i></div>
  <div class="bubble-btn-option"><i class="material-icons">face</i></div>
  <div class="bubble-btn-option"><i class="material-icons">whatshot</i></div>
</div>

I’m not sure what you call a “dynamic list” in this instance, but it sounds to me like this could be more easily achieved using Webflow’s design capabilities, rather than trying to insert some code. Have you tried simply doing this as a drop-down menu and rounding the cells ?

Or am I missing the point of what you’re trying to achieve?

I need to use the list items as input checkboxes because I have them hooked into the CMS controlling some content as a filter using custom JS.

It looks like I need to use a custom HTML in order to hook into the input fields without using a webflow form block.