How to create a dynamic id for a dynamic button?

Question

I am able to create an onlick dynamic button with an incrementer and a decrementer option, but I am unable to create a dynamic id for other buttons due to which these buttons are not getting incremented or decremented. Currently only the first button gets decremented/incremented even when clicked on other buttons.

Here is the plunker

When you click on + icon content and a incrementer/decrementer button is added in Manage Portfolio section. I have tried different solutions which have been defined on Stack Overflow but they don't seem to work here.

             <table>
                <thead>
                    <tr>
                        <th>STOCK</th>
                        <th>PRICE</th>
                        <th>SHARES</th>
                        <th>WEIGHT</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="stock in stocksArray" class="portfoliokey">
                        <td>{{stock.key}}</td>
                        <td class="portfoliovalue">{{"&#x20b9;" + stock.value}}</td>
                        <td>
                            <input type="button" onclick="decrementValue()" value="-">
                            <input type="button" id="number" value="0" />
                            <input type="button" onclick="incrementValue()" value="+" />
                        </td>
                        <td></td>
                    </tr>
                </tbody>
            </table>

Script

   function incrementValue() {
    var value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById('number').value = value;
}

function decrementValue() {
    value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value--;
    document.getElementById('number').value = value;
}

score 1 · Accepted Answer · answered Jul 06 '17 at 21:28

Here's my working version, using the index in the id.

https://plnkr.co/edit/lSteH17zNL7gMHqQQCSI?p=preview

 var app = angular.module('myApp', []);


    // var app = angular.module('myApp', []);

    app.controller('stockCtrl', function($scope, $http) {
        $http.get('data.json').then(function(response) {
            $scope.stocksArray = [];
            var indexes = [];
            $scope.stocks = response.data.price;
            $scope.addToTable = function(key, value, index) {
                var mystock = {};
                mystock.key = key;
                mystock.value = value;
                mystock.index = index;
                if (indexes.indexOf(index) == -1) {
                    indexes.push(index);
                    $scope.stocksArray.push(mystock);
                }
            };
            $scope.incrementValue = function( index ) {
                var value = parseInt(document.getElementById('number' + index).value, 10);
                value = isNaN(value) ? 0 : value;
                value++;
                document.getElementById('number' + index).value = value;
            };
        
            $scope.decrementValue = function( index ) {
                value = parseInt(document.getElementById('number' + index).value, 10);
                value = isNaN(value) ? 0 : value;
                value--;
                document.getElementById('number' + index).value = value;
            };

        });

    });

    app.filter('objLimitTo', [function() {
        return function(obj, limit) {
            if (obj) {
                var keys = Object.keys(obj);
                if (keys.length < 1) {
                    return [];
                }
            }

            var result = {},
                count = 0;
            angular.forEach(keys, function(key) {
                if (count >= limit) {
                    return false;
                }
                result[key] = obj[key];
                count++;
            });
            return result;
        };
    }]);

<!DOCTYPE html>
<html ng-App="myApp">

  <head>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
    <script src="script.js"></script>
   
  </head>

  <body>
 
  <div ng-controller="stockCtrl">
        <section class="pickstocks">
            <label class="basiclabel">Pick Stocks</label>
            <div class="infoone">
                <p>Showing matching stocks</p>
                <button>Apply Filters</button>
            </div>
            <div class="stockpage">
                <ul id="nav">
                    <li ng-repeat="(key,value) in stocks | objLimitTo:8 track by $index">
                        <span class="keyvalue"> {{key}} </span>
                        <span class="keyvalue">{{"&#x20b9;" + value}}</span>
                        <span class="fa fa-plus plus" ng-click="addToTable(key, value, $index)"></span>
                    </li>
                </ul>
            </div>
        </section>
        <section class="pickstocks">
            <label class="basiclabel">Manage Portfolio</label>
            <div>
                <table>
                    <thead>
                        <tr>
                            <th>STOCK</th>
                            <th>PRICE</th>
                            <th>SHARES</th>
                            <th>WEIGHT</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="stock in stocksArray" class="portfoliokey">
                            <td>{{stock.key}}</td>
                            <td class="portfoliovalue">{{"&#x20b9;" + stock.value}}</td>
                            <td>
                                <input type="button" id="num1" ng-click="decrementValue( stock.index )" value="-">
                                <input type="button" id="number{{ stock.index }}" value="0" />
                                <input type="button" ng-click="incrementValue( stock.index )" value="+" />
                            </td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
    </div>
  </body>

</html>

Thanks mate. I just missed the little index. – jackD Jul 06 '17 at 21:34 — jackD, Jul 06 '17 at 21:34

Ronnie Royston · Answer 2 · 2017-07-06T21:50:39.673

Speaking purely of Web standards HTML/CSS/JS-ECMA, I believe using data attributes is purpose built for your use case. In other words, use data-whatever="myIdentifierForWhateverProperty" and then use vanilla JS logic if(document.getElementsByTagName("button")[iterateOverEachOne]){do this} else {do that};.

Using data attributes

HTML5 is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, extra properties on DOM, or Node.setUserData().
<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

How to create a dynamic id for a dynamic button?

2 Answers2