Javascript 多个颜色选择器实例

我尝试在输入字段上创建多个颜色选择器实例，使用选择按钮启动颜色选择器，并使用重置按钮清除字段。问题是我不想在标记中添加单独类的加载，然后加载单独的jquery函数来匹配它

这是我正在使用的jquery

jQuery(document).ready(function($) {
$('.select_color').click( function(e) {
colorPicker = jQuery(this).next('div');
input = jQuery(this).prev('input');
$(colorPicker).farbtastic(input);
colorPicker.show();
e.preventDefault();
$(document).mousedown( function() {
$(colorPicker).hide();
});
});

$('.select_color').click(function() {
$('.link_color').val($.farbtastic('.color_picker').color);
});

$('.reset_color').click(function() {
  $('.link_color').val('');
  $('.link_color').css('background-color', '#fff');
});
});

这是我的标记

function mb_setting_color() {
$options = get_option( 'mb-theme-options' );
?>
<input class="link_color" type="text" name="mb-theme-options[link_color]" value="<?php echo esc_attr( $options['link_color'] ); ?>" />
<input type='button' class='select_color button-secondary' value='Select Color'>
<div class='color_picker' style='z-index: 100; background:#f1f1f1; position:absolute; display:none;'></div>
<input type='button' class='reset_color button-secondary' value='Reset'>
<?php
}

function mb_hover_setting_color() {
$options = get_option( 'mb-theme-options' );
?>
<input class="link_color" type="text" name="mb-theme-options[link_hover_color]" value="<?php echo esc_attr( $options['link_hover_color'] ); ?>" />
<input type='button' class='select_color button-secondary' value='Select Color'>
<div class='color_picker' style='z-index: 100; background:#f1f1f1; position:absolute; display:none;'></div>
<input type='button' class='reset_color button-secondary' value='Reset'>
<?php
}

函数mb_设置_颜色（）{
$options=get_选项（“mb主题选项”）；
?>