JavaScript

I want count in my textarea product codes.
I have whitelist for product codes so I cant type or write anything else into textarea.
Found bad issue, I can write only static product codes like (first 16 is product code other 6 is how many products it is in list...):

0FAR12345H00123C + 00001P
0FAR54321H00321C + 00001P
0FAR54321H00321C + 00002P

So now I have two problems..
First problem, whitelist universal product codes like this:

0FAR12345H00123C + 00001P
0FAR543H00321C + 00001P
0F321H321C + 00001P
0R31H1C + 001P

Second problem is how to count these product codes under textarea + overall count.

Example under textarea counts:
0FAR12345H00123C: 5
0FAR543H00321C: 2
0F321H321C: 6
0R31H1C: 4
Overall: 17

Javascript:

<pre>
"use strict";
	toFile.focus();

	var timeoutId;
	$('#toFile').on('keypress', function() {
	    console.log('Textarea Change');
	    
	    clearTimeout(timeoutId);
	    timeoutId = setTimeout(function() {
	        // Runs 3 second (3000 ms) after the last change    
	        saveToFile();
	    }, 3000);
	});

	toFile.addEventListener("keyup", event => {
	    const data = toFile.value.split("\n");
	    const result = data.unique();
	    info.textContent = result.length !== data.length ? "Duplicate removed" : "";
	    toFile.value = result.join('\n');
	});

	if (!Array.prototype.unique) {
	    Object.defineProperty(Array.prototype, "unique", {
	        configurable: false,  // these 3 properties default to false so not needed
	        enumerable: false,    // But have added them just to show their availability.
	        writable: false,         
	        value: function() { 
	            const existing = {};
	            return this.filter(a => existing[a] = !existing[a] ? true : false);
	        }
	    });
	} else {
	    throw new Error("Array.prototype.unique already defined.");
	}

	const CODE = ['Product', 'Codes', 'Here'];
	const reg = /^([a-zA-Z0-9]{1,6})$/;

	// Ensure values been inserted are in correct format
	function onInput() {
	  let values = event.target.value
	    .split('\n')
	    .map(v => {
	      v = v.trim().toUpperCase();
	      if (v.length <= 16) {
	        if (CODE[0].substr(0, v.length) != v &&
	          CODE[1].substr(0, v.length) != v) {
	          v = v.substr(0, v.length - 1);
	        }
	      } else if (!v.substr(16, 22).match(reg)) { // at the moment static 16 product code lenght + 6 is count of products.
	        v = v.substr(0, v.length - 1);
	      }
	      return v;
	    }).join('\n');

	  event.target.value = values;
	}
	
	function saveToFile() {
	    console.log('Saving to the db');
	    toFile = $('#toFile').val().replace(/\n\r?/g, '<br />');
		$.ajax({
			url: "test2.php",
			type: "POST",
			data: {toFile:toFile}, // serializes the form's elements.
			beforeSend: function(xhr) {
	            // Let them know we are saving
				$('#status').html('Saving...');
			},
			success: function(toFile) {
				// You can get data returned from your ajax call here. ex. jqObj.find('.returned-data').html()
	            // Now show them we saved and when we did
	            var d = new Date();
	            $('#status').html('Saved! Last: ' + d.toLocaleTimeString());
			},
		});
	}

	$('.form').submit(function(e) {
		saveToFile();
		e.preventDefault();
	})

<form class="contact-form" method="post">
    <textarea id="toFile" name="toFile" oninput="onInput()"></textarea><br>
    <input type="submit" value="Submit">
</form>

<!-- under here I want show count of product codes + overall count -->

<div id="status"></div>
<div id="info"></div

does anyone know of any good interactive tutorials for ReactJS, React Native? It seems there is only like 1 or 2 actually interactive tutorials that exist, the rest are just video tutorials.

$(document).on('click', '#restart', function() {
     showQuestions();
 });

 var x = "";
 var i = 0;

 function showQuestions() {
 document.getElementById('holder').
 innerHTML = x;

for (j = 0; j < words[i].options.length; j++) {
    if (i < words.length) {
       $('#holder').append("<div 
       id="+words[i].options[j] + " 
       class='alternatives'>" + 
       words[i].options[j] + "
       </div>");
       }
     }
      if (i < words.length) {
         $('#holder').append('<div 
         id="quest">' + 
         words[i].question + '</div>');
         i++;
     }
 }

 showQuestions();

 $('#holder').on('click', 
'.alternatives', function() {
     showQuestions();
});

 // Checking answers

    score = 0;
    k = 0;

 $(document).on('click', 
'.alternatives', function() {
     let guess = this.id;
     if (k < words.length) {
    var correct = words[k].answer;
         k++;
     }
     if (guess === correct) {
         score++;
     }

     if (score <= words.length) {
         z = score;
         document.getElementById('summary').innerHTML = z;
     }

     if (k >= words.length) {
         $('#holder').fadeOut();
         $('#restart').fadeIn();
     }
 });

$(document).on('click', '#restart', function() {
    $(this).fadeOut();
    $('#holder').fadeIn();
    showQuestions();
});

The function displays values of options property of array in separate divs. I want to give each div a unique id, which I have given, but the first displayed divs are replaced by totally different divs on click; so I am unable to give ids to each div. I want that divs should remain same and only the values should change on click. Presently the ids that I have given are removed when next values are displayed on click.  How can I achieve that?  Thanks for your suggestions.

<button id="btnNext" onclick="showOptions();"> Options </button>

<div id="container"> </div>

var antonyms = [

       {
           question: "soft",
           options: ["dark", "white", "heavy", "hard", "down", "pretty", "butter", "cotton"],
           answer: "hard"

       },

       {
           question: "beautiful",
           options: ["pretty", "ugly", "handsome", "wonderful", "up", "high", "cheerful", "black"],
           answer: "ugly"

       },
    ]

    // Define a method that generates the HTML for one question.


    function showOptions(q)

    {
        let qHtml = '<div class="option">' + q.question + '</div>';

        qHtml += q.options.map(o => '<div class="option">' + o + '</div>').join("");

        return qHtml;

    }

```
    // Start showing the first question. Click event will show next question.


    let container = document.getElementById("container");

    let button = document.getElementById("btnNext");

    let qIdx = 0;

    container.innerHTML = showOptions(antonyms[qIdx]);

    button.addEventListener("click", function()

        {

            qIdx += 1;

            if (qIdx < antonyms.length)

                container.innerHTML = showOptions(antonyms[qIdx]);

            else

                button.disabled = true;

        });

```
    // Giving unique id to each option div

    $('#container div').each(function(eq, el) {

        el = $(el);

        if (typeof(el.attr('id')) === "undefined") {

            el.attr('id', 'box-' + eq);

        }

    });

<script type="text/javascript">
     $(document).ready(function () {
         $("#msform").validate({
             rules: {
               certsel: "required",
               ssn1: "required",
               ssn2: "required",
               ssn3: "required",
               fname: "required",
               lname: "required",
               email: {
                   required: true,
                   email: true
                 },
               address: "required",
               city: "required",
               county: "required",
               state: "required",
               zip: "required",
               birthmon: "required",
               birthday: "required",
               birthyr: "required",
               ed: "required",
               ref1name: "required",
               ref1loc: "required",
               ref1title: "required",
               ref1area: "required",
               ref1pre: "required",
               ref1suff: "required",
               ref2name: "required",
               ref2loc: "required",
               ref2title: "required",
               ref2area: "required",
               ref2pre: "required",
               ref2suff: "required",
               ref3name: "required",
               ref3loc: "required",
               ref3title: "required",
               ref3area: "required",
               ref3pre: "required",
               ref3suff: "required",
               convictions: "required",
               txtCaptcha: "required",
               nmon: "required",
               nday: "required",
               nyr: "required",
               fullname: "required"
               }
           },
           messages: {
               //This section we need to place our custom validation message for each control.
               certsel: "Please select the position for which you're applyingd.",
                 ssn1: "Please enter your complete Social Security Number.",
                 ssn2: "Please enter phone number.",
                 ssn3: "Please enter your name.",
                 fname: "Please enter your first and last names.",
                 lname: "Please enter your first and last names.",
                 email: "Please enter your email address.",
                 address: "Please enter your complete Address, including city, state and zip code.",
                 city: "Please enter your complete Address, including city, state and zip code.",
                 county: "Please enter your complete Address, including city, state and zip code.",
                 state: "Please enter your complete Address, including city, state and zip code.",
                 zip: "Please enter your complete Address, including city, state and zip code.",
                 birthmon: "Please enter your birth month, day and year.",
                 birthday: "Please enter your birth month, day and year.",
                 birthyr: "Please enter your birth month, day and year.",
                 ed: "Please enter your highest level of education or if you have a GED.",
                 ref1name: "Please enter all information for refrence 1.",
                 ref1loc: "Please enter all information for refrence 1.",
                 ref1title: "Please enter all information for refrence 1.",
                 ref1area: "Please enter all information for refrence 1.",
                 ref1pre: "Please enter all information for refrence 1.",
                 ref1suff: "Please enter all information for refrence 1.",
                 ref2name: "Please enter all information for refrence 2.",
                 ref2loc: "Please enter all information for refrence 2.",
                 ref2title: "Please enter all information for refrence 2.",
                 ref2area: "Please enter all information for refrence 2.",
                 ref2pre: "Please enter all information for refrence 2.",
                 ref2suff: "Please enter all information for refrence 2.",
                 ref3name: "Please enter all information for refrence 3.",
                 ref3loc: "Please enter all information for refrence 3.",
                 ref3title: "Please enter all information for refrence 3.",
                 ref3area: "Please enter all information for refrence 3.",
                 ref3pre: "Please enter all information for refrence 3.",
                 ref3suff: "Please enter all information for refrence 3.",
                 convictions: "Please indicate whether you have had any convictions.",
                 txtCaptcha: "Please enter the code on above.",
                 nmon: "Please enter today's date and your full name in the space provided.",
                 nday: "Please enter today's date and your full name in the space provided.",
                 nyr: "Please enter today's date and your full name in the space provided.",
                 fullname: "Please enter today's date and your full name in the space provided."
                 }
            });
        });
  if ((!$('#msform').valid())) {
     return false;
 }
 </script>