Multiple image selection and progress bar

See more:

Javascript

jQuery

I'm doing a project and I'm trying to select multiple images and each selection should increase the progress bar and deselection of an image should decrease it. Can someone help me out to write the java script or jquery to achieve the same. Thanks in advance.

<div class="col-lg-9" id="brd pics">

        <div class="progress">
        <div class="progress-bar progress-bar-striped active" id="prog" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 1%;">
        </div>
            </div>
            <div class=" col-md-4 col-xs-6 thumb">
                <img class="img-responsive img-thumbnail" src="images/image1.jpg" alt="">
                <a href="" class="prs" id="1">More info</a><span id="s1">This is for some text that appear within the image when u click the more info.This is for some text that appear within the image when u click the more info.This is for some text that appear within the image when u click the more info.This is for some text that appear within the image when u click the more info.</span>
            </div>
            <div class=" col-md-4 col-xs-6 thumb">
                <img class="img-responsive img-thumbnail" src="images/image2.jpg" alt="">
                <a href="#" class="prs" id="2">More info</a><span id="s2">This is for some text that appear within the image when u click the more info.</span>
            </div>
            <div class=" col-md-4 col-xs-6 thumb">
                <img class="img-responsive img-thumbnail" src="images/image3.jpg" alt="">
                <a href="#" class="prs" id="3">More info</a><span id="s3">This is for some text that appear within the image when u click the more info.</span>
            </div>
            <div class=" col-md-4 col-xs-6 thumb">
                <img class="img-responsive img-thumbnail" src="images/image4.jpg" alt="">
                <a href="#" class="prs" id="4">More info</a><span id="s4">This is for some text that appear within the image when u click the more info.</span>
            </div>
            <div class=" col-md-4 col-xs-6 thumb">
                <img class="img-responsive img-thumbnail" src="images/image5.jpg" alt="">
                <a href="#" class="prs" id="5">More info</a><span id="s5">This is for some text that appear within the image when u click the more info.</span>
            </div>
            <div class=" col-md-4 col-xs-6 thumb">
                <img class="img-responsive img-thumbnail" src="images/image6.jpg" alt="">
                <a href="#" class="prs" id="6">More info</a><span id="s6">This is for some text that appear within the image when u click the more info.</span>
            </div>
            <div class=" col-md-4 col-xs-6 thumb">
                <img class="img-responsive img-thumbnail" src="images/image7.jpg" alt="">
                <a href="#" class="prs" id="7">More info</a><span id="s7">This is for some text that appear within the image when u click the more info.</span>
            </div>
            <div class=" col-md-4 col-xs-6 thumb">
                <img class="img-responsive img-thumbnail" src="images/image8.jpg" alt="">
                <a href="#" class="prs" id="8">More info</a><span id="s8">This is for some text that appear within the image when u click the more info.</span>
            </div>
            <div class=" col-md-4 col-xs-6 thumb">
                <img class="img-responsive img-thumbnail" src="images/image9.jpg" alt="">
                <a href="" class="prs" id="9">More info</a><span id="s9">This is for some text that appear within the image when u click the more info.</span>
            </div>
        </div>

And JS for progress bar:

// progress bar
$(function(){
    var cN = "high";
    var modWidth = 100;
    var prec = 1;
    $(".thumb img").one( "click", function() {
    $(".progress-bar").width( modWidth ).addClass( "mod" );
    modWidth += 96;
        prec = prec + 11;
    document.getElementById("prog").innerHTML = prec + "%";
    
});

});

:

What I have tried:

I've tried taking the children.length function for image but as i have div tag in it! I've written a width function for progress bar but its kinda not right.