Change this element when its not the selector in the function?

Change this element when its not the selector in the function?

All I am trying to achieve here is applying changes to breakoff at the
same time changes are applied to this which is jQuery('.toggle-bg')
jQuery I am trying to only make changes to breakoff from this .toggle-bg
jQuery('.toggle-bg').on('change', function () {
var value = jQuery('input.switch-id-value',this).val(),
moon1 = jQuery('#' + value + '_0').is(':checked'),
breakoff = jQuery('.line-break-off'),
toggle = jQuery(this);
toggle.css('background-color', (moon1 ? '#46b692' : '#333'));
breakoff.each(function() {
toggle.css('background-color', (moon1 ? '#46b692' : '#333'));
});
}).trigger('change');
There are several things I am sure that will get this to work... example I
would need to use .parent() Let me show you the HTML so you understand
where breakoff is in relation to the toggle.
HTML:
<li class="top-header">
<div class="box-title">
<div class="section-icon fontawesome-twitter">
<span class="line-decor"></span>
<span class="line-break-off break"></span> //THE TARGET
</div>
</div>
// This is sloppy but this block below contains the toggle you get the idea..
// I dont have much experience using .parent() it kinda confuses me
// I am sure I need to nest my way out to target this.parent()
.line-break-off
<div class="party">
<div class="control-block ">
<fieldset class="buttonset button-switch"><span class="toggle-bg"
id="top-header" style="background-color: rgb(51, 51, 51);"><input
type="radio" checked="checked" value="1"
name="brashup[top-header]" id="top-header_0"><input type="hidden"
value="top-header" class="switch-id-value"><input type="radio"
value="0" name="brashup[top-header]" id="top-header_1"><input
type="hidden" value="top-header" class="switch-id-value"><span
class="switch ui-buttonset"><p
class="switch-inner-bar"></p></span></span>
</fieldset>&nbsp;&nbsp;
<div class="bottom-box"><span class="description btn-desc">Here
you can choose if you want a fixed header or not.</span>
</div>
</div>
</div>
</li>
Simply put, this is a list of multiple toggles and while the specific
toggle is changed I want to manipulate its parent .line-break-off by
adding a class, or css whatever I can take it from there :)