根据输入值使用div

Question

我一直在努力使它工作一段时间，只需要一点帮助就可以完成它！

我有一个示例页面，您可以在这里查看

https://jsfiddle.net/vorLpd4f/19/

这是代码

$(document).ready(function() {

  var competitorsArr = [
    [1, 23],
    [0, 15],
    [0, 18],
    [0, 24],
    [0, 10]
  ];

  const myPrice = competitorsArr.find(([owner]) => owner === 1)[1];
  const numCheaperThanMine = competitorsArr.reduce(
    (a, [owner, price]) => (
      price < myPrice && owner !== 1 ?
      ++a :
      a
    ),
    0
  );

  $("#rank").val(numCheaperThanMine + 1);
  $("#rankoutof").val(competitorsArr.length);

  $("#atpp").on("input", function() {
    var retailprice = $("#retailprice").val();
    var atrp = $("#atrp").val();
    var atpp = $("#atpp").val() / 100;
    var siv = $("#siv").val();
    retailprice = atrp * atpp;
    var margin = retailprice - siv;
    $("#retailprice").val(retailprice);
    $("#margin").val(margin);

  });


  $("#retailprice").on("input", function() {
    var atrp = $("#atrp").val();
    var retailprice = $("#retailprice").val();
    retailprice = parseFloat(retailprice);
    var siv = $("#siv").val();
    var margin = retailprice - siv
    var atpp = retailprice * 100 / atrp;
    $("#atpp").val(atpp.toFixed(2));
    $("#margin").val(margin.toFixed(0));
    $("#myretailprice").html(retailprice.toLocaleString());
    $("#rankATPP").html(atpp.toFixed(1));

    $("#<%=vrm%>").title = retailprice;
    console.log($("#<%=vrm%>").title)

    $sorted_items = getSorted('#competitors .row', 'title').clone();
    $('#competitors').html($sorted_items);

  });

  var $sorted_items,
    getSorted = function(selector, attrName) {
      return $(
        $(selector).toArray().sort(function(a, b) {
          var aVal = parseInt(a.getAttribute(attrName)),
            bVal = parseInt(b.getAttribute(attrName));
          return aVal - bVal;
        })
      );
    };
  $sorted_items = getSorted('#competitors .row', 'title').clone();
  $('#competitors').html($sorted_items);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<form class="form-inline">

  <div>
    <label for="retailprice">Price</label>
    <div class="input-group">
      <span class="input-group-addon">£</span>
      <input type="number" class="form-control" id="retailprice" value="23">

    </div>
  </div>

  <div>
    <label for="suggestedprice">Suggested Price</label>
    <div class="input-group">
      <span class="input-group-addon">£</span>
      <input type="number" class="form-control" id="atrp" value="20">

    </div>
  </div>

  <div>
    <label for="atpp">%</label>
    <div class="input-group">
      <input type="text" class="form-control" id="atpp" value="115">
      <span class="input-group-addon">%</span>
    </div>
  </div>

  <div>
    <label for="margin">Margin</label>
    <div class="input-group">
      <span class="input-group-addon">£</span>
      <input type="number" class="form-control" id="margin" value="8" readonly>
    </div>
  </div>

  <div class="col-md-2">
    <label for="siv">Cost</label>
    <div class="input-group">
      <span class="input-group-addon">£</span>
      <input type="number" class="form-control" id="siv" value="15" readonly>
    </div>
  </div>

  <div class="col-md-2">
    <label for="rank">Rank</label><br />
    <input type="number" class="form-control" id="rank" value="" style="width:50px"> /
    <input type="number" class="form-control" id="rankoutof" value="" readonly style="width:50px">
  </div>
</form>
Other similar items prices
<div id=competitors>
  <div class="row" title="23" id="a">
    23 - YOUR ITEM
  </div>
  <div class="row" title="15" id="a">
    15
  </div>
  <div class="row" title="18" id="b">
    18
  </div>
  <div class="row" title="24" id="c">
    24
  </div>
  <div class="row" title="10" id="d">
    10
  </div>
</div>

我的想法是，我正在构建来自某些json的产品列表，这些产品没有特别的顺序，我需要按照与我自己的产品相比的价格顺序对它们进行排名，并返回排名和有多少个商品。

该位有效，我需要努力的位

1. 通过更改价格或更改建议价格的百分比来更改我产品的价格，然后查看对排名的影响，然后对div进行重新排序以显示产品现在的排名。

2. 更改等级框中的等级，这将更改我的产品div的位置，并将价格更改为将等级升至最接近整数所需的价格。

   < / li>

任何感激之情都可以得到我的帮助：）

此致

理查德