JS very theme specific

We are using the Gin theme (subtheme of Claro) and see that it has some issues with the addin buttons.
Going through the JS I do see some code which might could be improved to make it more generic.

For instance, this piece:

var $tables = $('#' + paragraphsWidgetId).find('.field-multiple-table').first()
        .once('paragraphs-features-add-in-between-init');

      $tables.each(function (index, table) {
        var $table = $(table);
        var $addModalBlock = $table.siblings('.clearfix');
        var $addModalButton = $addModalBlock.find('.paragraph-type-add-modal-button');

It starts correct with ID targeting of elements. But soon it switches to find siblings with a somewhat generic class ".clearfix". What if a theme uses a div around the table? With the modal outside of it? It does not work anymore.
But both the addModalBlock and the addModalButton operate using ID's as well. Shouldn't we use those? Or preprocess those elements to add a specific .js-addInModalBlock class or something like that to target it more specific.

The same here:

Drupal.paragraphs_features.add_in_between.setDelta = function ($add_more_wrapper, delta) {
    var $delta = $add_more_wrapper.closest('.clearfix')
      .find('.paragraph-type-add-modal-delta');

    $delta.val(delta);
  };

This is the html output of Gin.

<div
  class="field--type-entity-reference-revisions field--name-field-paragraphs field--widget-paragraphs js-form-wrapper form-wrapper"
  data-drupal-selector="edit-field-paragraphs-wrapper" id="edit-field-paragraphs-wrapper">
  <div class="is-horizontal paragraphs-tabs-wrapper content-active" id="field-paragraphs-add-more-wrapper">
    <ul class="paragraphs-tabs tabs primary clearfix" style="display: none;">
      <li id="content" class="tabs__tab is-active"><a href="#field-paragraphs-values">Content</a></li>
      <li id="behavior" class="tabs__tab"><a href="#field-paragraphs-values">Behavior</a></li>
    </ul>
    <div data-drupal-selector="edit-field-paragraphs" aria-describedby="edit-field-paragraphs--description"
         class="js-form-item form-item form-item--multiple">
      <div class="layer-wrapper">
        <div class="tabledrag-toggle-weight-wrapper js-tabledrag-toggle-weight-wrapper"><a href="#"
                                                                                           class="action-link action-link--extrasmall tabledrag-toggle-weight action-link--icon-show js-tabledrag-toggle-weight">Show
          row weights</a></div>
        <div class="tableresponsive-toggle-columns">
          <button type="button" class="link tableresponsive-toggle"
                  title="Show table cells that were hidden to make the table fit within a small screen."
                  style="display: none;">Hide lower priority columns
          </button>
        </div>
        <table id="field-paragraphs-values" class="field-multiple-table responsive-enabled draggable-table"
               aria-describedby="edit-field-paragraphs--description" data-striping="1">

        </table>
      </div>

      <div id="edit-field-paragraphs--description" class="form-item__description">Content blocks to enrich the page with
        information and media.
      </div>
      <div class="form-actions">
        <div
          class="paragraphs-add-dialog paragraphs-add-dialog--categorized js-hide paragraphs-style-list button--small js-form-wrapper form-wrapper"
          role="dialog" aria-modal="true" aria-label="Add Paragraph" data-widget-title="Paragraph"
          data-widget-title-plural="Paragraphs" data-drupal-selector="edit-field-paragraphs-add-more"
          id="edit-field-paragraphs-add-more">
          <div class="paragraph-type-add-modal first-button js-form-wrapper form-wrapper"
               data-drupal-selector="edit-field-paragraphs-add-more-add-modal-form-area"
               id="edit-field-paragraphs-add-more-add-modal-form-area"><input
            class="paragraph-type-add-modal-button js-show button--small button js-form-submit form-submit"
            data-drupal-selector="edit-field-paragraphs-add-more-add-modal-form-area-add-more" type="submit"
            id="edit-field-paragraphs-add-more-add-modal-form-area-add-more" name="button_add_modal"
            value="Add Paragraph"><input class="paragraph-type-add-modal-delta"
                                         data-drupal-selector="edit-field-paragraphs-add-more-add-modal-form-area-add-more-delta"
                                         type="hidden"
                                         name="field_paragraphs[add_more][add_modal_form_area][add_more_delta]"
                                         value=""></div>
          <span class="paragraphs-add-suffix">to <em class="placeholder">Paragraphs</em></span>
          <div
            class="paragraphs-add-dialog paragraphs-add-dialog--categorized js-hide paragraphs-style-list button--small"
            role="dialog" aria-modal="true" aria-label="Add Paragraph" data-widget-title="Paragraph"
            data-widget-title-plural="Paragraphs" data-drupal-selector="edit-field-paragraphs-add-more">
            <div class="dialog-header clearfix">
              <div class="filter" role="search">
                <input type="search" class="item-filter" placeholder="Find Paragraphs" aria-label="Find Paragraphs">
                <div class="search-description">
                  <label title="Include description when searching"><input type="checkbox" name="search_description"
                                                                           value="1"
                                                                           aria-label="Include description when searching">Include
                    description when searching</label>
                </div>
              </div>
              <button type="button" class="display-toggle style-list" title="Display Paragraphs as list">list</button>
              <button type="button" class="display-toggle style-tiles" title="Display Paragraphs as tiles">tiles
              </button>
            </div>
            <div class="button-group clearfix" role="group">
              <div class="category-title">Uncategorized</div>
              <ul class="paragraphs-add-dialog-list">
                <li class="paragraphs-add-dialog-row" data-easy-access-weight="2">
                  <button class="field-add-more-submit paragraphs-button--add-more button js-form-submit form-submit"
                          data-drupal-selector="field-paragraphs-text-add-more"
                          aria-describedby="field-paragraphs-text-add-more--description" formnovalidate="formnovalidate"
                          type="submit" id="field-paragraphs-text-add-more" name="field_paragraphs_text_add_more"
                          value="Text">
                    <div aria-hidden="true" class="paragraphs-button--icon"
                         style="background-image: url(&quot;http://synetic-kickstarter-demo.localhost/sites/synetic-kickstarter-demo/files/paragraphs_type_icon/text-default-icon.svg&quot;);"></div>
                    <div class="paragraphs-label" title="Text">Text</div>
                    <div class="paragraphs-description" id="field-paragraphs-text-add-more--description">Simple
                      paragraph with WYSIWYG text editor.
                    </div>

                  </button>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>