Javascript 结果到处都在变化

这是我的看法，请看一下：

<div class="form-group target" id="tools" >
  <div class="input-group">
    <div class="col-lg-6"> <select class="form-control" style="width: 100%" name="tool_id[]" id="toolss" onchange="tool(this)" required>
      <option value="">Select</option>

      </select></div>

    <div class="col-lg-3">  
      <input type="text" class="form-control" required name="quantity[]" id="quantity" placeholder="Quantity">
    </div>
    <div class="col-lg-3" id="avail">  
      <p class="available">0 available</p>
    </div>

    <span class="input-group-btn">
      <button type="button" class="btn btn-danger addel-delete"><i class="fa fa-remove"></i>
      </button>
    </span>
  </div>
</div>

挑选
0可用

这是我的剧本：

function tool(sel)
{
  var tools=sel.value;

  alert(tools);

  var url='<?php echo base_url(); ?>admin/tool/ajax_available';
  $.post(url, {tools:tools}, function(data){  
    alert("Value: " + $(".available").html(data));
  });
}

功能工具（sel）
{
var工具=选择值；
警报（工具）；
var url='admin/tool/ajax_可用'；
$.post（url，{tools:tools}，函数（数据）{
警报（“值：”+$（“.available”）.html（数据））；
});
}

问题是，每当我继续从选择框中选择值时，相应的值和以前选择的所有值都会变得相同。 我在这里展示的图像

.

问题：当您使用

.available

选择器时，它将影响文档中类

可用的所有元素

建议的解决方案：

id
在同一文档中应该是唯一的，因此如果您有多个
工具
，则应使用有效结构的类替换
id
：

<div class="form-group target tools">

希望这有帮助。
$（“.available”）
将搜索页面中类
可用的每个元素，不仅在
工具
容器中，更改的
在.k中。但是为了得到准确的结果，我应该做的是查看Zakarias的答案
$(sel).closest('.tools').find('.available').html(data);