Add class to bootstrap textbox - yii2 - yii2

Question

I have a form in yii2. In that I have a input field like below.
<input type="text" class="form-control" id="productsales-<?= $i ?>-value">
It's inside a dynamic form andno coming from any model.It's just to hold some calculated value. And the idea is to calculate the values fileed by users in this field to another textbox like below -
<?= $form->field($model, 'amount')->textInput(['maxlength' => true, 'class' => 'sum']) ?>
I already have the javascript code to calculate the total amount like below -
<?php
/* start getting the total amount */
$script = <<<EOD
var getSum = function() {
var items = $(".item");
var sum = 0;
items.each(function (index, elem) {
var priceValue = $(elem).find(".sumPart").val();
//Check if priceValue is numeric or something like that
sum = (parseFloat(sum) + parseFloat(priceValue)).toFixed(2);
});
//Assign the sum value to the field
$(".sum").val(sum);
};
//Bind new elements to support the function too
$(".container-items").on("change", ".sumPart", function() {
getSum();
});
EOD;
$this->registerJs($script);
/*end getting the total amount */
?>
Please note that I have a class sum in the second textbox which comes from a model. My question is that how can I add a class(sumPart) like this(sum) in the first textbox which is not coming from a model.
Update after discussion with Insane Skull
I have a dynamic form like below
I want to calculate sum of all the entries in Value and pass it to amount.
The code of Value is -
<input type="text" class="form-control sumPart" id="productsales-<?= $i ?>-value">
The code of Amount is -
<?= $form->field($model, 'amount')->textInput(['maxlength' => true, 'class' => 'sum']) ?>
The javascript I've tried is already given above.
The problem with this code is the calculated "value" is not passing to amount textbox.
Update: A little issue

Answer 1

Modify JS :
$this->registerJs('
function getSum() {
var sum = 0;
var items = $(".item");
items.each(function (index, elem) {
var priceValue = $(elem).find(".sumPart").val();
sum = parseFloat(sum) + parseFloat(priceValue);
});
if(isNaN(sum) || sum.length == 0) {
sum = 0;
}
$(".sum").val(sum);
}
$(".container-items").on("change", function() {
getSum();
});
jQuery(".dynamicform_wrapper").on("afterDelete", function(e) {
getSum();
});
');

Answer 2

I am little unsure about the problem you are facing. If you want to add a class to a input field, you can easily do so in the class attribute of the input tag. And the class attribute does support multiple values, so you can write something like this:
<input type="text" class="form-control sumPart" id="productsales-<?= $i ?>-value">
**UPDATE -- based on comment by OP **
#Tanmay, I understand that you may not be getting the desired output. However, it should not really matter if we are rendering the fields using $form->field() or plain HTML. If the fields have the proper classes assigned, then the JS code posted by Kostas in your referenced link should work - irrespective of how the class name was added to the input field.
Can you please confirm (by using Inspect Element) if the sumPart class is actually assigned to the relevant fields once the page loads? Maybe some JS is overwriting the class attribute again?
If the classes are assigned properly, please check if there are any other JS errors in console which may prevent the sum calculation JS from working properly.