How do you target elements with JQuery Minicolors?

[RailsCod3rFuture]

I can't seem to figure out how to change the swatch color and manipulate separately targeted class elements. I'm using rails btw.

<div class="col-md-4">
     <%= f.simple_fields_for :profile_color do |c| %>
       <label>Avatar Background Color</label>
       <%= c.input :border_background_color, as: :minicolors, class: 'form-control profile-border-bg-color', label: false %>
       <label>Body Background Color</label>
       <%= c.input :body_background_color, as: :minicolors, class: 'form-control profile-body-bg-color', label: false %>
       <label>Header Label Background Color</label>
       <%= c.input :header_label_background_color, as: :minicolors, class: 'form-control profile-header-label-bg-color', label: false %>
       <label>Information Box Color</label>
       <%= c.input :information_box_color, as: :minicolors, class: 'form-control profile-info-color', label: false %>
       <label>About Me Background Color</label>
       <%= c.input :about_me_background_box_color, as: :minicolors, class: 'form-control profile-about-me-color', label: false %>
     <% end %>
   </div>

<div class="col-md-4">
      <div class="preview-container">
        <div class="preview-header">
          <h6>Color Preview</h6>
        </div>
        <div class="preview-border">
          <div class="preview-container-avatar">

          </div>
        </div>
        <div class="preview-container-about-me">

        </div>
        <div class="preview-header-block">

        </div>
        <div class="preview-info-block">

        </div>
      </div>

<script type="text/javascript">
    $(document).on('turbolinks:load', function () {
 
        $('#profile_color_attributes_border_background_color, #profile_color_attributes_body_background_color, #profile_color_attributes_header_label_background_color, #profile_color_attributes_information_box_color, #profile_color_attributes_about_me_background_box_color').minicolors({
            theme: 'bootstrap',
            animationSpeed: 50,
            animationEasing: 'swing',
            change: function (hex, opacity) {
                var color = $(this).minicolors('rgbaString');
                var parent = $(self);
                if (parent.hasClass("profile-border-bg-color")) {
                    $("preview-border").css("background-color", color);
                } else if (parent.hasClass("profile-body-bg-color")) {
                    $("preview-container").css("background-color", color);
                } else if (parent.hasClass("profile-header-label-bg-color")) {
                    $("preview-header-block").css("background-color", color);
                } else if (parent.hasClass("profile-info-color")) {
                    $("preview-info-block").css("background-color", color);
                } else if (parent.hasClass("rf-profile-about-me-color")) {
                    $("preview-container-about-me").css("background-color", color);
                }
            }

        });
    });
</script>