Javascript 1个表单，2个div，JQuery不工作

我有一个包含2个div的表单，每个div中都有一个输入，当我按下与每个输入相关联的按钮时，什么都没有发生，我相信这与表单中的div有关。我知道这段代码在没有2个div的情况下可以工作，但是我需要修改div，这样我就可以按原样进行布局。有什么建议吗

我知道我忘了在这篇文章中添加JQuery，这是我的错误，但即使添加了JQuery，它在我的项目中也不起作用，而这段代码就是基于这个项目的

实时代码：

$（文档）.ready（函数（）{
$（'#addLikes'）。单击（函数（）{
if（$（'#likes'）.val（）=“”）{
警报（“输入为空。”）；
}否则{
$（'#likeOutput'）。追加（$（“”）
.attr（“value”，$（'#likes'）.val（））.text（$（'#likes'）.val（））；
}
});
$（'#removeLikes'）。单击（函数（）{
$（“#类似输出选项：选中”）.remove（）；
});
$（“#添加不喜欢项”）。单击（函数（）{
if（$（'#不喜欢'）.val（）=“”）{
警报（“不喜欢的输入为空”）；
}否则{
$（“#不喜欢输出”）。追加（$（“”）
.attr（“value”，$（'#dislikes'）.val（））.text（$（'#dislikes'）.val（））；
}
});
$（'#removeDislikes'）。单击（函数（）{
$（“#不喜欢输出选项：选中”）.remove（）；
});
});
选择{
宽度：250px；
}
输入[类型=文本]{
字体系列：“近似规则”，无衬线；
宽度：250px；
}

喜欢：




添加喜欢的
删除喜欢的内容

选定的喜欢：


不喜欢：




添加不喜欢的内容
消除厌恶

选定的不喜欢项：


添加jQuery，并向jQuery添加$reference

像这样更改JS的第一行

jQuery(document).ready(function ($) {

即使包含jQuery，也缺少引用。请更改它，它就会工作。
只需在这个HTML部分的jquery库下面添加，就可以看到它工作了：）



谢谢，jQuery没有定义

我刚刚在您的JSFIDLE上添加了jQuery，您的代码可以正常工作

点击Javascript选项->框架和扩展->选择jQuery版本->点击Run确定，代码开始按预期工作。我不知道发生了什么，反正我也没有修改代码。但有一分钟它不起作用，然后突然起作用了。
当您包含jQuery时，您的代码似乎工作得很好：您的JSFIDLE在两个地方出错：包含jQuery和在head中运行，而不是在onload中运行。看我为你做的片段这很奇怪；我忘了在我的示例中包括JQuery，这是我的错误。但是这个例子是为了代表我正在进行的一个项目，因为我包含了JQuery，所有的事情都是以一种非常相似的方式完成的，但是这不起作用（非常weird@RoryMcCrossan是否有一种方法可以引用特定div中的某些内容，因此：$（'#div1 addLikes'）。单击（function（）{DO something}）；这可能吗？
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>