使用jQuery或JavaScript将每个部分中的两个字段相乘

Question

这是我的代码：

$('#hitung').click(function() {
  var count = $('.item').length;
  var locality = 'id-ID';
  var luas = $('.tinggi' + count).val() * $('#lebar' + count).val();
  console.log(luas);
  var dayasebar = luas / 12.5 * 2;
  var hasil = dayasebar / 2.5;
  var harga = Math.ceil(hasil) * 120000;
  var title = $('#title-temp').text();
  var color = document.querySelector('input[name="color"]:checked').value;
  var color_title = document.querySelector('input[name="color"]:checked ~ label h4').innerHTML;

  $('#luas').html('<p>Luas: ' + luas + ' meter &#178;</p>');
  $('#hasil').html('<p>' + Math.ceil(hasil) + ' Kaleng ' + Math.ceil(hasil) * 5 + ' Kg | Rp ' + harga.toLocaleString(locality, {}) + '</p>');
  $('#color').html('<div class="row"><div class="col-xs-6 col-md-4" style="height: 50px; float: left; background-color: ' + color + '; display: block;text-align: center;"></div><div class="col-xs-6 col-md-8"><h4 style="text-transform: capitalize; font-weight: bold; margin-top:0">' + title + '</h4><p>' + color_title + '</p></div></div>');
  $('.panel-footer').css('display', 'block');
});

$('#tambah').click(function() {
  var count = $('.item').length;
  var id = 'Item[' + count + ']';
  var item = $('.item:first').clone();
  // item.find('input:first').attr('id', id);
  item.find('.tinggi' + count + ':first').attr('id', 'tinggi' + count);
  item.find('#title:first').attr('for', id)
    .html('Dinding ' + (1 + count));
  item.appendTo('#fieldset');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="fieldset">
  <div class="panel panel-default item" style="background-color: #f2f2f2;border-radius: 0;border: 0;">
    <div class="panel-body">
      <h3 id="title" style="text-transform: uppercase; font-weight: bold; text-decoration: underline; margin-bottom: 25px" class="text-center">Dinding 1</h3>
      <form>
        <div class="row text-left">
          <div class="col-md-10 col-md-offset-1">
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label style="font-style: italic; font-weight: normal; font-size: 20px">Tinggi</label>
                  <input type="text" id="tinggi1" name="tinggi" class="form-control new-input tinggi">
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label style="font-style: italic; font-weight: normal; font-size: 20px">Lebar</label>
                  <input type="text" id="lebar1" name="lebar" class="form-control new-input">
                </div>
              </div>
              <div class="col-md-12">
                <div class="form-group">
                  <label style="font-style: italic; font-weight: normal; font-size: 20px">Pilih Warna</label>
                  <div class="row">
                    <div class="col-md-12">
                      <div class="col-md-4" style="background-color: #fff;padding-top: 15px;padding-bottom: 12px;">
                        <div id="color-group1">
                          <input type="radio" name="color" id="color1" class="input-hidden" value="blue" data-name="Hello" style="visibility:hidden; display: none;" />
                          <label for="color1" style="display: block;">
																		  	<span style="width: 100%; background-color: blue; display: block;text-align: center;padding: 50px 0;">
								        										<h4>Warna 1</h4>
								        									</span>
																		</label>
                        </div>
                      </div>
                      <div class="col-md-4" style="background-color: #fff;padding-top: 15px;padding-bottom: 12px;">
                        <div id="color-group2">
                          <input type="radio" name="color" id="color2" class="input-hidden" value="lightblue" style="visibility:hidden; display: none;" />
                          <label for="color2" style="display: block;">
																		  	<span style="width: 100%; background-color: lightblue; display: block;text-align: center;padding: 50px 0;">
								        										<h4>Warna 2</h4>
								        									</span>
																		</label>
                        </div>
                      </div>
                      <div class="col-md-4" style="background-color: #fff;padding-top: 15px;padding-bottom: 12px;">
                        <div id="color-group3">
                          <input type="radio" name="color" id="color3" class="input-hidden" value="brown" style="visibility:hidden; display: none;" />
                          <label for="color3" style="display: block;">
																		  	<span style="width: 100%; background-color: brown; display: block;text-align: center;padding: 50px 0;">
								        										<h4>Warna 3</h4>
								        									</span>
																		</label>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>

    </div>

    <div class="panel-footer quite-white-tip bg-pink text-white" style="display: none">
      <h3 style="text-transform: uppercase; text-decoration: underline; font-weight: 600">Kebutuhan Cat Anda</h3><br>
      <div class="row">
        <div class="col-md-6 col-md-offset-3">
          <div class="media">
            <div class="row">
              <div class="col-md-5">
                <div class="media-left media-middle">
                  <a href="#">
                    <img class="media-object img-responsive" src="http://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg" alt="...">
                  </a>
                </div>
              </div>
              <div class="col-md-7">
                <div class="media-body text-left">
                  <div id="color" style="display: block; clear: both; width: 100%;"></div><br>
                  <div id="luas"></div>
                  <div id="hasil"></div>
                  <div id="title-temp" style="display: none;">Warna</div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>

  </div>

</div>

<button type="button" id="tambah" class="btn btn-sm btn-link">Add</button><br>
<button type="button" id="hitung" class="btn btn-lg btn-success">COUNT</button>
<br><br>

当我按下COUNT按钮时，代码工作正常，所有结果都放在我想要显示的位置。但我仍然缺少一个功能，附加项目类。当我追加或添加或克隆项目类时，由于每个输入的id或名称相同，计算不起作用。我尝试使用[]作为输入，但仍然不知道如何计算它并将所有结果都放在原始元素中。

Answer 1

$('#hitung').click(function() {
  var count = $('.item').length;
  var locality = 'id-ID';
  var luas = $('#tinggi' + count).val() * $('#lebar' + count).val();
  
  var dayasebar = luas / 12.5 * 2;
  var hasil = dayasebar / 2.5;
  var harga = Math.ceil(hasil) * 120000;
  var title = $('#title-temp').text();
  var color = $('input[name=color]').css('backgroundColor');
  var color_title =$('input[name=color] ~ label h4').text();
  
  $('#luas').html('<p>Luas: ' + luas + ' meter &#178;</p>');
  $('#hasil').html('<p>' + Math.ceil(hasil) + ' Kaleng ' + Math.ceil(hasil) * 5 + ' Kg | Rp ' + harga.toLocaleString(locality, {}) + '</p>');
  $('#color').html('<div class="row"><div class="col-xs-6 col-md-4" style="height: 50px; float: left; background-color: ' + color + '; display: block;text-align: center;"></div><div class="col-xs-6 col-md-8"><h4 style="text-transform: capitalize; font-weight: bold; margin-top:0">' + title + '</h4><p>' + color_title + '</p></div></div>');
  $('.panel-footer').css('display', 'block');
});

$('#tambah').click(function() {
  var count = $('.item').length;
  var id = 'Item[' + count + ']';
  var item = $('.item:first').clone();
  // item.find('input:first').attr('id', id);
  item.find('.tinggi' + count + ':first').attr('id', 'tinggi' + count);
  item.find('#title:first').attr('for', id)
    .html('Dinding ' + (1 + count));
  item.appendTo('#fieldset');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="fieldset">
  <div class="panel panel-default item" style="background-color: #f2f2f2;border-radius: 0;border: 0;">
    <div class="panel-body">
      <h3 id="title" style="text-transform: uppercase; font-weight: bold; text-decoration: underline; margin-bottom: 25px" class="text-center">Dinding 1</h3>
      <form>
        <div class="row text-left">
          <div class="col-md-10 col-md-offset-1">
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label style="font-style: italic; font-weight: normal; font-size: 20px">Tinggi</label>
                  <input type="text" id="tinggi1" name="tinggi" class="form-control new-input tinggi">
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label style="font-style: italic; font-weight: normal; font-size: 20px">Lebar</label>
                  <input type="text" id="lebar1" name="lebar" class="form-control new-input">
                </div>
              </div>
              <div class="col-md-12">
                <div class="form-group">
                  <label style="font-style: italic; font-weight: normal; font-size: 20px">Pilih Warna</label>
                  <div class="row">
                    <div class="col-md-12">
                      <div class="col-md-4" style="background-color: #fff;padding-top: 15px;padding-bottom: 12px;">
                        <div id="color-group1">
                          <input type="radio" name="color" id="color1" class="input-hidden" value="blue" data-name="Hello" style="visibility:hidden; display: none;" />
                          <label for="color1" style="display: block;">
																		  	<span style="width: 100%; background-color: blue; display: block;text-align: center;padding: 50px 0;">
								        										<h4>Warna 1</h4>
								        									</span>
																		</label>
                        </div>
                      </div>
                      <div class="col-md-4" style="background-color: #fff;padding-top: 15px;padding-bottom: 12px;">
                        <div id="color-group2">
                          <input type="radio" name="color" id="color2" class="input-hidden" value="lightblue" style="visibility:hidden; display: none;" />
                          <label for="color2" style="display: block;">
																		  	<span style="width: 100%; background-color: lightblue; display: block;text-align: center;padding: 50px 0;">
								        										<h4>Warna 2</h4>
								        									</span>
																		</label>
                        </div>
                      </div>
                      <div class="col-md-4" style="background-color: #fff;padding-top: 15px;padding-bottom: 12px;">
                        <div id="color-group3">
                          <input type="radio" name="color" id="color3" class="input-hidden" value="brown" style="visibility:hidden; display: none;" />
                          <label for="color3" style="display: block;">
																		  	<span style="width: 100%; background-color: brown; display: block;text-align: center;padding: 50px 0;">
								        										<h4>Warna 3</h4>
								        									</span>
																		</label>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>

    </div>

    <div class="panel-footer quite-white-tip bg-pink text-white" style="display: none">
      <h3 style="text-transform: uppercase; text-decoration: underline; font-weight: 600">Kebutuhan Cat Anda</h3><br>
      <div class="row">
        <div class="col-md-6 col-md-offset-3">
          <div class="media">
            <div class="row">
              <div class="col-md-5">
                <div class="media-left media-middle">
                  <a href="#">
                    <img class="media-object img-responsive" src="http://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg" alt="...">
                  </a>
                </div>
              </div>
              <div class="col-md-7">
                <div class="media-body text-left">
                  <div id="color" style="display: block; clear: both; width: 100%;"></div><br>
                  <div id="luas"></div>
                  <div id="hasil"></div>
                  <div id="title-temp" style="display: none;">Warna</div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>

  </div>

</div>

<button type="button" id="tambah" class="btn btn-sm btn-link">Add</button><br>
<button type="button" id="hitung" class="btn btn-lg btn-success">COUNT</button>
<br><br>